/* ==================================================
   VARIABLES
================================================== */

:root {
    --blue: #34495e;
    --blue-dark: #263747;
    --blue-light: #46637d;
    --accent: #3498db;

    --white: #ffffff;
    --black: #111111;
    --gray: #68727c;
    --light-gray: #f3f5f7;

    --border: rgba(255, 255, 255, 0.18);
    --shadow: rgba(17, 17, 17, 0.2);

    --heading-font: "Zen Dots", sans-serif;
    --body-font: "Montserrat", sans-serif;
    --arabic-font: "Cairo", sans-serif;

    --header-height: 100px;
}


/* ==================================================
   RESET
================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 15px);
}

body {
    min-width: 320px;
    color: var(--black);
    background: var(--white);
    font-family: var(--body-font);
    line-height: 1.75;
    overflow-x: hidden;
}

body,
button,
input {
    font-family: var(--body-font);
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input {
    font: inherit;
}

button {
    border: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.logo {
    font-family: var(--heading-font);
    font-weight: 400;
}

h1,
h2,
h3 {
    line-height: 1.25;
}

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input {
    font-family: var(--arabic-font);
}

html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] .logo {
    font-family: var(--arabic-font);
    font-weight: 700;
}


/* ==================================================
   HEADER
================================================== */

.header {
    position: sticky;
    z-index: 1000;
    top: 0;

    display: flex;
    width: 100%;
    height: var(--header-height);

    align-items: center;
    justify-content: space-between;

    padding: 0 30px;

    color: var(--white);
    background: var(--blue);

    box-shadow: 0 8px 25px rgba(17, 17, 17, 0.10);
}

.logo {
    position: relative;
    z-index: 1004;

    color: var(--white);

    font-size: 1.25rem;
    text-decoration: none;
    text-transform: uppercase;
}

.logo span {
    color: #a8c8df;
}

.navigation-panel {
    display: flex;
    align-items: center;
    gap: 28px;
}

.menu {
    display: flex;
    align-items: center;
    gap: 25px;

    list-style: none;
}

.menu a {
    position: relative;

    display: inline-block;

    padding: 12px 0;

    color: var(--white);

    font-family: var(--heading-font);
    font-size: 0.72rem;
    text-decoration: none;
    text-transform: uppercase;

    transition: color 0.3s ease;
}

.menu a::after {
    position: absolute;

    right: 0;
    bottom: 5px;
    left: 0;

    height: 2px;

    background: var(--accent);

    content: "";

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.3s ease;
}

.menu a:hover,
.menu a:focus-visible {
    color: #bbdef5;
}

.menu a:hover::after,
.menu a:focus-visible::after {
    transform: scaleX(1);
}


/* Checkbox cachée mais accessible */
.menu-checkbox {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;

    clip: rect(0 0 0 0);
    clip-path: inset(50%);

    overflow: hidden;

    white-space: nowrap;
}

.show-menu-btn,
.hide-menu-btn {
    display: none;
}

.menu-overlay {
    display: none;
}


/* ==================================================
   LANGUES
================================================== */

.language-selector {
    display: flex;

    align-items: center;
    gap: 4px;

    padding: 5px;

    border: 1px solid var(--border);
    border-radius: 25px;
}

.language-selector > i {
    margin: 0 5px;
    color: #c9d9e5;
}

.language-btn {
    min-width: 34px;
    min-height: 32px;

    padding: 5px 7px;

    border-radius: 18px;

    color: var(--white);
    background: transparent;

    font-size: 0.7rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        color 0.25s ease,
        background 0.25s ease;
}

.language-btn:hover,
.language-btn:focus-visible,
.language-btn.active {
    color: var(--blue);
    background: var(--white);
}


/* ==================================================
   CONTENU / HERO
================================================== */

.content {
    width: 100%;
}

.hero {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 40px;

    padding: 50px 50px 50px 0;
}

.hero-content {
    display: flex;

    width: min(58%, 950px);
    min-height: 560px;

    align-items: flex-start;
    flex-direction: column;
    justify-content: center;

    padding: 55px clamp(30px, 5vw, 75px);

    border-radius: 0 10px 10px 0;

    color: var(--white);
    background: var(--blue);
}

.section-kicker {
    display: inline-flex;

    align-items: center;
    gap: 10px;

    color: #c5d7e4;

    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.section-kicker i {
    color: var(--white);
}

.hero-content h1 {
    margin: 25px 0;

    font-size: clamp(2.2rem, 5vw, 4rem);
    text-transform: uppercase;
    
}

.hero-content h1 span {
    display: block;
    padding: 0px 0px 0px 30px;
}

.hero-content h1 span:last-child {
    color: #b8d3e6;
}

.hero-introduction {
    max-width: 650px;

    color: #e0e8ee;

    font-size: 1.05rem;
}

.publication-data {
    display: flex;

    flex-wrap: wrap;

    gap: 10px 22px;

    margin-top: 25px;

    color: #d7e0e7;

    font-size: 0.85rem;
}

.publication-data p {
    display: inline-flex;

    align-items: center;
    gap: 8px;
}

.primary-link {
    display: inline-flex;

    align-items: center;
    gap: 12px;

    margin-top: 30px;
    padding: 12px 22px;

    border: 1px solid var(--white);
    border-radius: 5px;

    color: var(--blue);
    background: var(--white);

    font-weight: 700;
    text-decoration: none;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        transform 0.3s ease;
}

.primary-link:hover,
.primary-link:focus-visible {
    color: var(--white);
    background: transparent;

    transform: translateY(-2px);
}

.hero-image {
    width: min(42%, 600px);
    margin-right: 30px;
}


/* ==================================================
   PHOTOS
================================================== */

.photo-frame {
    position: relative;

    padding: 20px;

    border-radius: 10px;

    background: var(--light-gray);

    box-shadow: 0 20px 50px var(--shadow);

    overflow: hidden;
}

.photo-frame::after {
    position: absolute;

    inset: 20px;

    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 5px;

    content: "";

    pointer-events: none;
}

.photo-frame img {
    width: 100%;

    object-fit: cover;

    filter: grayscale(1) contrast(1.12) brightness(0.82);

    transition:
        filter 0.5s ease,
        transform 0.6s ease;
}

.photo-frame:hover img {
    filter: grayscale(1) contrast(1.22) brightness(0.92);
    transform: scale(1.025);
}

.hero-image img {
    height: 600px;
}


/* ==================================================
   SECTION INTRODUCTION
================================================== */

.sect-content {
    display: flex;

    width: 100%;
    min-height: 560px;

    align-items: stretch;
    justify-content: center;

    padding: 40px 30px;

    color: var(--white);
    background: var(--blue);
}

.sect2M {
    display: flex;

    width: min(62%, 900px);

    align-items: flex-start;
    flex-direction: column;
    justify-content: center;

    padding: 35px;
}

.sect2M h2 {
    margin: 20px 0;

    font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.sect2M > p:not(.section-kicker) {
    color: #e1e7ec;
}

.sect2M blockquote {
    margin-top: 25px;
    padding: 18px 22px;

    border-left: 4px solid var(--white);

    color: #f1f4f6;
    background: rgba(255, 255, 255, 0.08);

    font-weight: 600;
}

.sect-image {
    width: min(38%, 520px);

    align-self: center;

    background: var(--blue-dark);
}

.sect-image img {
    height: 480px;
}


/* ==================================================
   SECTIONS GÉNÉRALES
================================================== */

.quantum-comparison,
.qsharp-learning,
.video-section {
    padding:
        clamp(70px, 9vw, 110px)
        clamp(25px, 6vw, 80px);
}

.section-heading,
.learning-introduction {
    width: min(100%, 900px);

    margin: 0 auto 50px;

    text-align: center;
}

.section-heading .section-kicker,
.learning-introduction .section-kicker {
    justify-content: center;

    color: var(--blue-light);
}

.section-heading .section-kicker i,
.learning-introduction .section-kicker i {
    color: var(--blue);
}

.section-heading h2,
.learning-introduction h2,
.qsharp-feature h2 {
    margin: 18px 0;

    color: var(--blue);

    font-size: clamp(1.8rem, 4vw, 3rem);
}

.section-heading > p:not(.section-kicker),
.learning-introduction > p:not(.section-kicker) {
    margin-top: 15px;

    color: var(--gray);
}


/* ==================================================
   COMPARAISON
================================================== */

.comparison-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 28px;

    width: min(100%, 1150px);

    margin: auto;
}

.comparison-card {
    position: relative;

    padding: 38px;

    border: 1px solid #dde3e8;
    border-radius: 10px;

    background: var(--white);

    box-shadow: 0 15px 40px rgba(52, 73, 94, 0.10);

    transition:
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.comparison-card:hover {
    border-color: var(--blue-light);

    transform: translateY(-5px);

    box-shadow: 0 22px 50px rgba(52, 73, 94, 0.17);
}

.featured-card {
    color: var(--white);
    background: var(--blue);
}

.featured-label {
    position: absolute;

    top: 20px;
    right: 20px;

    padding: 7px 12px;

    border-radius: 20px;

    color: var(--blue);
    background: var(--white);

    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
}

.card-icon {
    display: grid;

    width: 60px;
    height: 60px;

    margin-bottom: 25px;

    place-items: center;

    border-radius: 10px;

    color: var(--white);
    background: var(--blue);

    font-size: 1.55rem;
}

.featured-card .card-icon {
    color: var(--blue);
    background: var(--white);
}

.card-platform {
    color: var(--blue-light);

    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.featured-card .card-platform {
    color: #c8d9e5;
}

.comparison-card h3 {
    margin: 8px 0 18px;

    color: var(--blue);

    font-size: 2rem;
}

.featured-card h3 {
    color: var(--white);
}

.comparison-card > p:not(.card-platform) {
    color: var(--gray);
}

.featured-card > p:not(.card-platform) {
    color: #e1e7ec;
}

.feature-list {
    display: grid;

    gap: 12px;

    margin-top: 25px;

    list-style: none;
}

.feature-list li {
    position: relative;

    padding-left: 27px;

    color: var(--gray);
}

.featured-card .feature-list li {
    color: #e1e7ec;
}

.feature-list li::before {
    position: absolute;

    top: 0;
    left: 0;

    color: var(--blue);

    content: "\f058";

    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}

.featured-card .feature-list li::before {
    color: var(--white);
}


/* ==================================================
   APPRENTISSAGE Q#
================================================== */

.qsharp-learning {
    background: var(--light-gray);
}

.learning-cards {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 22px;

    width: min(100%, 1150px);

    margin: auto;
}

.learning-card {
    padding: 30px;

    border-radius: 10px;

    background: var(--white);

    box-shadow: 0 12px 35px rgba(52, 73, 94, 0.09);
}

.card-large-icon {
    margin-bottom: 22px;

    color: var(--blue);

    font-size: 2rem;
}

.learning-card h3 {
    color: var(--blue);

    font-size: 1.1rem;
}

.learning-card p {
    margin-top: 15px;

    color: var(--gray);
}

.qsharp-feature {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(390px, 0.9fr);

    gap: 50px;

    width: min(100%, 1150px);

    align-items: center;

    margin: 70px auto 0;
    padding: clamp(30px, 5vw, 55px);

    border-radius: 10px;

    color: var(--white);
    background: var(--blue);
}

.qsharp-feature .section-kicker {
    color: #c5d7e4;
}

.qsharp-feature h2 {
    color: var(--white);
}

.qsharp-feature > div:first-child > p:last-child {
    color: #e1e7ec;
}


/* ==================================================
   CODE
================================================== */

.code-preview {
    min-width: 0;

    border-radius: 8px;

    background: #18222c;

    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);

    overflow: hidden;
}

.code-preview-header {
    display: flex;

    min-height: 45px;

    align-items: center;
    gap: 7px;

    padding: 0 15px;

    background: #202e3a;
}

.code-preview-header > span {
    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: #aeb6bc;
}

.code-preview-header > span:nth-child(2) {
    background: #77838d;
}

.code-preview-header > span:nth-child(3) {
    background: #55616b;
}

.code-preview-header p {
    margin-left: 10px;

    color: #c6d0d7;

    font-size: 0.75rem;
}

.code-preview pre {
    margin: 0;
    padding: 25px;

    overflow-x: auto;
}

.code-preview code {
    color: #dfe7ec;

    font-family: Consolas, Monaco, monospace;
    font-size: clamp(0.72rem, 1.4vw, 0.88rem);
    line-height: 1.8;
}

.code-preview code span {
    color: #ffffff;

    font-weight: 700;
}

.standalone-code {
    width: 100%;

    margin-top: 25px;
    padding: 22px;

    border-radius: 8px;

    color: #dfe7ec;
    background: #18222c;

    font-family: Consolas, Monaco, monospace;
    font-size: 0.85rem;
    line-height: 1.7;

    overflow-x: auto;
}


/* ==================================================
   VIDÉO / FOOTER
================================================== */

.video-section {
    background: var(--white);
}

.video-wrapper {
    width: min(100%, 1060px);

    margin: auto;
    padding: 15px;

    border-radius: 10px;

    background: var(--blue);

    box-shadow: 0 20px 55px rgba(52, 73, 94, 0.20);
}

.video-wrapper iframe {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    border: 0;
}

.footer {
    display: flex;

    min-height: 120px;

    align-items: center;
    justify-content: space-between;

    gap: 25px;

    padding: 25px 40px;

    color: var(--white);
    background: var(--blue-dark);
}

.footer > p {
    color: #ced9e1;

    text-align: center;
}

.back-top {
    display: inline-flex;

    align-items: center;
    gap: 8px;

    color: var(--white);

    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}


/* ==================================================
   RTL ARABE
================================================== */

html[dir="rtl"] .hero {
    padding: 50px 0 50px 50px;
}

html[dir="rtl"] .hero-content {
    align-items: flex-start;

    border-radius: 10px 0 0 10px;
}

html[dir="rtl"] .hero-image {
    margin-right: 0;
    margin-left: 30px;
}

html[dir="rtl"] .sect2M,
html[dir="rtl"] .comparison-card,
html[dir="rtl"] .learning-card,
html[dir="rtl"] .qsharp-feature {
    text-align: right;
}

html[dir="rtl"] .sect2M blockquote {
    border-right: 4px solid var(--white);
    border-left: 0;
}

html[dir="rtl"] .feature-list li {
    padding-right: 27px;
    padding-left: 0;
}

html[dir="rtl"] .feature-list li::before {
    right: 0;
    left: auto;
}

html[dir="rtl"] .featured-label {
    right: auto;
    left: 20px;
}

html[dir="rtl"] .code-preview,
html[dir="rtl"] .standalone-code {
    direction: ltr;
    text-align: left;
}


/* ==================================================
   MENU BURGER — TABLETTE / SMARTPHONE
================================================== */

@media (max-width: 1050px) {

    .show-menu-btn {
        position: relative;
        z-index: 1004;

        display: flex;

        width: 44px;
        height: 44px;

        align-items: center;
        justify-content: center;

        border-radius: 8px;

        color: var(--white);
        background: transparent;

        font-size: 24px;

        cursor: pointer;

        transition:
            background 0.25s ease,
            transform 0.25s ease;
    }

    .show-menu-btn:hover,
    .show-menu-btn:focus-visible {
        background: rgba(255, 255, 255, 0.10);
    }

    .show-menu-btn:active {
        transform: scale(0.94);
    }

    .navigation-panel {
        position: fixed;
        z-index: 1003;

        top: 0;
        right: 0;

        display: flex;

        width: min(88vw, 430px);
        height: 100dvh;

        align-items: center;
        flex-direction: column;
        justify-content: center;

        gap: 0;

        padding: 80px 30px 40px;

        color: var(--white);
        background: var(--blue);

        box-shadow: -18px 0 45px rgba(0, 0, 0, 0.28);

        overflow-y: auto;

        transform: translateX(105%);

        visibility: hidden;

        transition:
            transform 0.35s ease,
            visibility 0.35s ease;
    }

    #chk:checked ~ .navigation-panel {
        transform: translateX(0);
        visibility: visible;
    }

    .hide-menu-btn {
        position: absolute;

        top: 24px;
        right: 24px;

        display: flex;

        width: 44px;
        height: 44px;

        align-items: center;
        justify-content: center;

        border-radius: 8px;

        color: var(--white);

        font-size: 25px;

        cursor: pointer;

        transition:
            background 0.25s ease,
            transform 0.25s ease;
    }

    .hide-menu-btn:hover,
    .hide-menu-btn:focus-visible {
        background: rgba(255, 255, 255, 0.10);
    }

    .hide-menu-btn:active {
        transform: scale(0.94);
    }

    .navigation-panel nav {
        width: 100%;
    }

    .menu {
        width: 100%;

        align-items: stretch;
        flex-direction: column;

        gap: 6px;
    }

    .menu li {
        width: 100%;
    }

    .menu a {
        display: block;

        width: 100%;

        padding: 14px 16px;

        border-radius: 7px;

        font-size: 0.82rem;
        text-align: center;
    }

    .menu a::after {
        display: none;
    }

    .menu a:hover,
    .menu a:focus-visible {
        color: var(--white);
        background: rgba(255, 255, 255, 0.09);
    }

    .language-selector {
        margin-top: 28px;
    }

    .menu-overlay {
        position: fixed;
        z-index: 1002;

        inset: 0;

        display: block;

        background: rgba(0, 0, 0, 0.58);

        opacity: 0;

        pointer-events: none;

        transition: opacity 0.35s ease;
    }

    #chk:checked ~ .menu-overlay {
        opacity: 1;

        pointer-events: auto;
    }

    /* RTL : panneau venant de la gauche */
    html[dir="rtl"] .navigation-panel {
        right: auto;
        left: 0;

        box-shadow: 18px 0 45px rgba(0, 0, 0, 0.28);

        transform: translateX(-105%);
    }

    html[dir="rtl"] #chk:checked ~ .navigation-panel {
        transform: translateX(0);
    }

    html[dir="rtl"] .hide-menu-btn {
        right: auto;
        left: 24px;
    }
}


/* ==================================================
   RESPONSIVE — TABLETTE
================================================== */

@media (max-width: 850px) {

    .hero {
        align-items: stretch;
        flex-direction: column-reverse;

        padding: 25px;

        text-align: center;
    }

    html[dir="rtl"] .hero {
        padding: 25px;
    }

    .hero-content {
        width: 100%;
        min-height: auto;

        align-items: center;

        padding: 45px 25px;

        border-radius: 10px;
    }

    html[dir="rtl"] .hero-content {
        align-items: center;

        border-radius: 10px;
    }

    .hero-image {
        width: min(100%, 600px);

        margin: auto;
    }

    html[dir="rtl"] .hero-image {
        margin: auto;
    }

    .hero-image img {
        height: min(500px, 75vh);
    }

    .publication-data {
        justify-content: center;
    }

    .sect-content {
        align-items: center;
        flex-direction: column;

        padding: 35px 20px;
    }

    .sect2M,
    .sect-image {
        width: min(100%, 700px);
    }

    .sect2M {
        align-items: center;

        padding: 25px 10px 40px;

        text-align: center;
    }

    html[dir="rtl"] .sect2M {
        align-items: center;
        text-align: center;
    }

    .sect-image img {
        height: min(460px, 70vh);
    }

    .qsharp-feature {
        grid-template-columns: 1fr;
    }
}


/* ==================================================
   RESPONSIVE — SMARTPHONE
================================================== */

@media (max-width: 700px) {

    .comparison-grid,
    .learning-cards {
        grid-template-columns: 1fr;
    }

    .footer {
        align-items: center;
        flex-direction: column;
        justify-content: center;

        text-align: center;
    }
}


@media (max-width: 600px) {

    :root {
        --header-height: 80px;
    }

    .header {
        padding: 0 18px;
    }

    .logo {
        font-size: 0.95rem;
    }

    .show-menu-btn {
        width: 42px;
        height: 42px;

        font-size: 22px;
    }

    .navigation-panel {
        width: min(92vw, 360px);

        padding: 75px 20px 30px;
    }

    .menu a {
        padding: 12px;

        font-size: 0.78rem;
    }

    .language-selector {
        margin-top: 24px;
    }
}


@media (max-width: 480px) {

    .hero {
        padding: 15px;
    }

    .hero-content {
        padding: 38px 18px;
    }

    .hero-content h1 {
        font-size: clamp(1.8rem, 11vw, 2.2rem);
    }

    .hero-image img {
        height: 380px;
    }

    .photo-frame {
        padding: 10px;
    }

    .photo-frame::after {
        inset: 10px;
    }

    .sect-content,
    .quantum-comparison,
    .qsharp-learning,
    .video-section {
        padding-right: 18px;
        padding-left: 18px;
    }

    .comparison-card,
    .learning-card {
        padding: 25px;
    }

    .featured-label {
        position: static;

        display: inline-block;

        margin-bottom: 20px;
    }

    .qsharp-feature {
        padding: 25px 18px;
    }

    .standalone-code {
        padding: 16px;

        font-size: 0.75rem;
    }
}


/* ==================================================
   ACCESSIBILITÉ — MOUVEMENTS RÉDUITS
================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}