/* ============================================================
   SCOLIA — Feuille de styles principale
   Direction : Institution d'élite — bordeaux & or sur fond crème
   Primaire : #7b1f3d | Accent or : #bb8c35 (parcimonie)
   ============================================================ */

/******************** Reset ********************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,
strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,
label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,
details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,
section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}
*,::after,::before{box-sizing:border-box}

/******************** Tokens ********************/
:root {
    --bordeaux:       #7b1f3d;   /* couleur de marque Scolia */
    --bordeaux-mid:   #611a31;   /* hover / accents profonds */
    --bordeaux-dark:  #3b111f;   /* fonds sombres (témoignages, plan vedette) */
    --bordeaux-ink:   #1a090f;   /* le plus sombre (bandeau stats, en-tête devoirs) */
    --gold:       #bb8c35;   /* or/laiton — accent parcimonieux, jamais en grande surface */
    --cream:      #f7f4ed;   /* fond clair principal, remplace le blanc */
    --off:        #eee7dd;   /* crème plus soutenu — alternance de sections */
    --border:     #e3dace;
    --muted:      #72625a;
    --body:       #261f1c;
    --black:      #12070a;   /* footer, burger — noir chaud plutôt que neutre */
    --font-h:     'Raleway', sans-serif;
    --font-b:     'Nunito', sans-serif;
    --section:    clamp(5rem, 9vw, 8rem);
    --radius:     0px;   /* angles nets — institutionnel, gravé, pas de mou */
    --ease:       cubic-bezier(.4,0,.2,1);
    --t:          .25s;
}

/******************** Base ********************/
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-b);
    font-size: 16px; line-height: 1.6;
    color: var(--body);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-h); font-weight: 900;
    line-height: 1.05; letter-spacing: -.03em;
    color: var(--body); margin-bottom: .5em;
}
h1 { font-size: clamp(3.2rem, 5.5vw + .5rem, 6.5rem); }
h2 { font-size: clamp(2rem, 3.5vw + .5rem, 3.5rem); }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.5rem); }
h4 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; }
p  { margin-bottom: 1rem; }
strong { font-weight: 700; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/******************** Typography helpers ********************/
.label {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--font-h);
    font-size: .7rem; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--bordeaux); margin-bottom: 1.25rem;
}
.label::before {
    content: '';
    width: 24px; height: 2px;
    background: var(--gold); flex-shrink: 0;
}
.label--cream { color: rgba(255,255,255,.5); }
.label--cream::before { background: rgba(255,255,255,.3); }

/* Soulignement ambre sur un mot clé dans un titre */
.u-amber {
    position: relative; display: inline-block;
}
.u-amber::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: .04em;
    height: .07em;
    background: var(--gold);   /* ambre #1 */
    border-radius: 2px;
}

/******************** Form ********************/
.form-group { margin-bottom: 1.25rem; }
.form-label {
    display: block;
    font-family: var(--font-h);
    font-size: .7rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: .4rem;
}
.form-control {
    display: block; width: 100%;
    padding: .875rem 1rem;
    font-family: var(--font-b); font-size: .95rem;
    color: var(--body); background: var(--cream);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
    line-height: 1.5;
}
.form-control:focus {
    border-color: var(--bordeaux);
    box-shadow: 0 0 0 3px rgba(123,31,61,.12);
}
.form-control::placeholder { color: #a89686; }
textarea.form-control { resize: vertical; min-height: 120px; }
select.form-control {
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 01-11.32 0l-80-80a8 8 0 0111.32-11.32L128 164.69l74.34-74.35a8 8 0 0111.32 11.32z' fill='%2372625a'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center;
    padding-right: 2.5rem;
}

/******************** Buttons ********************/
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5em;
    padding: .9em 2em;
    font-family: var(--font-h);
    font-size: .76rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer; border-radius: var(--radius);
    white-space: nowrap; line-height: 1;
    transition: all var(--t) var(--ease);
}
.btn i { font-size: 1.1em; }
.btn-lg  { padding: 1.05em 2.4em; font-size: .82rem; }
.btn-sm  { padding: .65em 1.3em; font-size: .7rem; }

.btn-primary {
    background: var(--bordeaux); color: var(--cream); border-color: var(--bordeaux);
}
.btn-primary:hover {
    background: var(--bordeaux-mid); border-color: var(--bordeaux-mid);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(123,31,61,.28);
}
.btn-outline {
    background: transparent; color: var(--bordeaux); border-color: var(--bordeaux);
}
.btn-outline:hover {
    background: var(--bordeaux); color: var(--cream);
    transform: translateY(-2px);
}
.btn-ghost {
    background: transparent; color: var(--cream);
    border-color: rgba(255,255,255,.35);
}
.btn-ghost:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.75);
}
.btn-dark {
    background: var(--black); color: var(--cream); border-color: var(--black);
}
.btn-dark:hover { background: #2a1015; transform: translateY(-2px); }

/******************** Grid ********************/
.container      { width:100%; margin:0 auto; padding:0 1rem; }
.container-fluid{ width:100%; margin:0 auto; padding:0 1rem; }
.row { display:flex; flex-wrap:wrap; margin:0 -15px; }
.row>* { padding:0 15px; }
.col   { flex:1 0 0%; }
.col-auto { flex:0 0 auto; width:auto; }
.col-1 {flex:0 0 8.333%;max-width:8.333%}
.col-2 {flex:0 0 16.667%;max-width:16.667%}
.col-3 {flex:0 0 25%;max-width:25%}
.col-4 {flex:0 0 33.333%;max-width:33.333%}
.col-5 {flex:0 0 41.667%;max-width:41.667%}
.col-6 {flex:0 0 50%;max-width:50%}
.col-7 {flex:0 0 58.333%;max-width:58.333%}
.col-8 {flex:0 0 66.667%;max-width:66.667%}
.col-9 {flex:0 0 75%;max-width:75%}
.col-10{flex:0 0 83.333%;max-width:83.333%}
.col-11{flex:0 0 91.667%;max-width:91.667%}
.col-12{flex:0 0 100%;max-width:100%}
.justify-content-start{justify-content:flex-start}
.justify-content-end{justify-content:flex-end}
.justify-content-center{justify-content:center}
.justify-content-between{justify-content:space-between}
.justify-content-around{justify-content:space-around}
.justify-content-evenly{justify-content:space-evenly}

@media(min-width:576px){
  .container{max-width:540px;padding:0 1.25rem}
  .container-fluid{padding:0 1.25rem}
  .col-sm{flex:1 0 0%}
  .col-sm-auto{flex:0 0 auto;width:auto}
  .col-sm-1{flex:0 0 8.333%;max-width:8.333%}.col-sm-2{flex:0 0 16.667%;max-width:16.667%}
  .col-sm-3{flex:0 0 25%;max-width:25%}.col-sm-4{flex:0 0 33.333%;max-width:33.333%}
  .col-sm-5{flex:0 0 41.667%;max-width:41.667%}.col-sm-6{flex:0 0 50%;max-width:50%}
  .col-sm-7{flex:0 0 58.333%;max-width:58.333%}.col-sm-8{flex:0 0 66.667%;max-width:66.667%}
  .col-sm-9{flex:0 0 75%;max-width:75%}.col-sm-10{flex:0 0 83.333%;max-width:83.333%}
  .col-sm-11{flex:0 0 91.667%;max-width:91.667%}.col-sm-12{flex:0 0 100%;max-width:100%}
}
@media(min-width:768px){
  .container{max-width:720px;padding:0 1.5rem}
  .container-fluid{padding:0 1.5rem}
  .col-md{flex:1 0 0%}.col-md-auto{flex:0 0 auto;width:auto}
  .col-md-1{flex:0 0 8.333%;max-width:8.333%}.col-md-2{flex:0 0 16.667%;max-width:16.667%}
  .col-md-3{flex:0 0 25%;max-width:25%}.col-md-4{flex:0 0 33.333%;max-width:33.333%}
  .col-md-5{flex:0 0 41.667%;max-width:41.667%}.col-md-6{flex:0 0 50%;max-width:50%}
  .col-md-7{flex:0 0 58.333%;max-width:58.333%}.col-md-8{flex:0 0 66.667%;max-width:66.667%}
  .col-md-9{flex:0 0 75%;max-width:75%}.col-md-10{flex:0 0 83.333%;max-width:83.333%}
  .col-md-11{flex:0 0 91.667%;max-width:91.667%}.col-md-12{flex:0 0 100%;max-width:100%}
}
@media(min-width:992px){
  .container{max-width:960px;padding:0 2rem}
  .container-fluid{padding:0 2rem}
  .col-lg{flex:1 0 0%}.col-lg-auto{flex:0 0 auto;width:auto}
  .col-lg-1{flex:0 0 8.333%;max-width:8.333%}.col-lg-2{flex:0 0 16.667%;max-width:16.667%}
  .col-lg-3{flex:0 0 25%;max-width:25%}.col-lg-4{flex:0 0 33.333%;max-width:33.333%}
  .col-lg-5{flex:0 0 41.667%;max-width:41.667%}.col-lg-6{flex:0 0 50%;max-width:50%}
  .col-lg-7{flex:0 0 58.333%;max-width:58.333%}.col-lg-8{flex:0 0 66.667%;max-width:66.667%}
  .col-lg-9{flex:0 0 75%;max-width:75%}.col-lg-10{flex:0 0 83.333%;max-width:83.333%}
  .col-lg-11{flex:0 0 91.667%;max-width:91.667%}.col-lg-12{flex:0 0 100%;max-width:100%}
}
@media(min-width:1200px){
  .container{max-width:1140px;padding:0 2.5rem}
  .container-fluid{padding:0 2.5rem}
  .col-xl{flex:1 0 0%}.col-xl-auto{flex:0 0 auto;width:auto}
  .col-xl-1{flex:0 0 8.333%;max-width:8.333%}.col-xl-2{flex:0 0 16.667%;max-width:16.667%}
  .col-xl-3{flex:0 0 25%;max-width:25%}.col-xl-4{flex:0 0 33.333%;max-width:33.333%}
  .col-xl-5{flex:0 0 41.667%;max-width:41.667%}.col-xl-6{flex:0 0 50%;max-width:50%}
  .col-xl-7{flex:0 0 58.333%;max-width:58.333%}.col-xl-8{flex:0 0 66.667%;max-width:66.667%}
  .col-xl-9{flex:0 0 75%;max-width:75%}.col-xl-10{flex:0 0 83.333%;max-width:83.333%}
  .col-xl-11{flex:0 0 91.667%;max-width:91.667%}.col-xl-12{flex:0 0 100%;max-width:100%}
}
@media(min-width:1400px){
  .container{max-width:1320px;padding:0 3rem}
  .container-fluid{padding:0 3rem}
  .col-xxl{flex:1 0 0%}.col-xxl-auto{flex:0 0 auto;width:auto}
  .col-xxl-1{flex:0 0 8.333%;max-width:8.333%}.col-xxl-2{flex:0 0 16.667%;max-width:16.667%}
  .col-xxl-3{flex:0 0 25%;max-width:25%}.col-xxl-4{flex:0 0 33.333%;max-width:33.333%}
  .col-xxl-5{flex:0 0 41.667%;max-width:41.667%}.col-xxl-6{flex:0 0 50%;max-width:50%}
  .col-xxl-7{flex:0 0 58.333%;max-width:58.333%}.col-xxl-8{flex:0 0 66.667%;max-width:66.667%}
  .col-xxl-9{flex:0 0 75%;max-width:75%}.col-xxl-10{flex:0 0 83.333%;max-width:83.333%}
  .col-xxl-11{flex:0 0 91.667%;max-width:91.667%}.col-xxl-12{flex:0 0 100%;max-width:100%}
}

/* ============================================================
   COMPOSANTS
   ============================================================ */

/******************** Navigation ********************/
.nav {
    position: sticky; top: 0; z-index: 200;
    background: var(--cream);
    border-bottom: 2.5px solid var(--bordeaux);
    transition: box-shadow var(--t) var(--ease);
}
.nav.stuck { box-shadow: 0 4px 24px rgba(18,7,10,.08); }
.nav__inner {
    display: flex; align-items: center;
    justify-content: space-between;
    height: 66px;
}
.nav__logo {
    display: flex; align-items: center;
    text-decoration: none; flex-shrink: 0;
}
.nav__logo-img { height: 34px; width: auto; }

/* ══════════════════════════════════════════════════
   NAV — menu déroulant "Nos cours"
   La zone de survol (.nav__drop-panel) commence pile à
   top:100%, sans espace mort : l'espacement visuel avec
   la carte vient d'un padding-top INTERNE, encore dans la
   zone survolable. Le délai de fermeture (250ms, géré en
   JS) absorbe les mouvements de souris rapides/diagonaux.
══════════════════════════════════════════════════ */
.nav__drop { position: relative; }

.nav__drop-trigger {
    background: none; border: none; padding: 0;
    font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit;
    display: flex; align-items: center; gap: .4rem;
    cursor: pointer;
}
.nav__drop-trigger i { font-size: .62rem; transition: transform .2s ease; }
.nav__drop.open .nav__drop-trigger i { transform: rotate(180deg); }

.nav__drop-panel {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%);
    padding-top: 16px;                 /* zone tampon, toujours à l'intérieur du panneau survolable */
    width: max-content;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .15s ease;
    z-index: 300;
}
.nav__drop.open .nav__drop-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
}

.nav__drop-card {
    background: var(--cream);
    border: 1px solid var(--border);
    box-shadow: 0 16px 40px rgba(18,7,10,.14);
    padding: .5rem;
    min-width: 300px;
}
.nav__drop-link {
    display: block;
    padding: .9rem 1.1rem;
    text-decoration: none;
    transition: background var(--t);
}
.nav__drop-link:hover,
.nav__drop-link:focus-visible { background: var(--off); }
.nav__drop-link strong {
    display: block;
    font-family: var(--font-h); font-weight: 800;
    font-size: .88rem; color: var(--body);
}
.nav__drop-link span {
    display: block;
    font-size: .78rem; color: var(--muted); margin-top: .2rem;
}

@media (max-width: 991px) {
    .nav__drop { width: 100%; }
    .nav__drop-panel {
        position: static; transform: none;
        width: 100%; padding-top: 0; margin-top: .25rem;
        max-height: 0; overflow: hidden;
        opacity: 0;
        transition: max-height .3s ease, opacity .25s ease;
    }
    .nav__drop.open .nav__drop-panel {
        max-height: 320px;
        opacity: 1;
    }
    .nav__drop-card {
        background: var(--off);
        border: none; border-top: 1px solid var(--border);
        box-shadow: none;
        min-width: 0; width: 100%;
        padding: .25rem;
    }
    .nav__drop-link {
        padding: .8rem 1rem .8rem 2rem;
        border-left: 2px solid var(--border);
    }
    .nav__drop-link strong { font-size: .82rem; }
    .nav__drop.open .nav__drop-trigger { color: var(--bordeaux); }
}

.nav__links {
    display: flex; align-items: center; gap: 2.5rem;
}
.nav__link {
    font-family: var(--font-h);
    font-size: .72rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.nav__link:hover { color: var(--bordeaux); border-bottom-color: var(--bordeaux); }

.nav__cta {
    font-family: var(--font-h);
    font-size: .72rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--bordeaux); text-decoration: none;
    display: flex; align-items: center; gap: .4em;
    transition: gap var(--t) var(--ease);
}
.nav__cta:hover { gap: .75em; }

.nav__toggle {
    display: none; flex-direction: column; gap: 5px;
    cursor: pointer; background: none; border: none; padding: 4px;
}
.nav__toggle span {
    display: block; width: 22px; height: 2px;
    background: var(--black); transition: all var(--t);
    transform-origin: center;
}
.nav__toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.active span:nth-child(2) { opacity: 0; }
.nav__toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/******************** Hero ********************/
.hero {
    display: grid;
    grid-template-columns: 55fr 45fr;
    min-height: calc(100vh - 66px);
    overflow: hidden;
}

/* Panneau gauche texte */
.hero__left {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(3rem,6vw,6rem) clamp(2rem,5vw,5rem);
    position: relative;
    border-right: 1px solid var(--border);
}
/* Barre bleue verticale gauche */
.hero__left::before {
    content: '';
    position: absolute; left: 0; top: 10%; bottom: 10%;
    width: 4px; background: var(--bordeaux);
    border-radius: 0 2px 2px 0;
}

.hero__pretitle {
    font-family: var(--font-h);
    font-size: .7rem; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--bordeaux);
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: 1.75rem;
}
.hero__pretitle::before {
    content: ''; width: 24px; height: 2px;
    background: var(--gold); flex-shrink: 0;
}

.hero__title {
    font-size: clamp(3.2rem,5.5vw + .5rem,6.5rem);
    font-weight: 900; line-height: .95;
    letter-spacing: -.045em;
    color: var(--body);
    margin-bottom: 1.75rem;
}
.hero__title-line2 {
    display: block; color: var(--bordeaux);
    position: relative;
}
/* ambre #1 : soulignement de "réussir" */
.hero__title-line2::after {
    content: '';
    position: absolute;
    left: 0; bottom: .04em;
    width: 55%; height: .07em;
    background: var(--gold);
    border-radius: 2px;
}

.hero__body {
    font-size: 1.05rem; line-height: 1.8;
    color: var(--muted);
    max-width: 400px; margin-bottom: 2.5rem;
}
.hero__body p { margin: 0; }

.hero__actions {
    display: flex; gap: 1rem; flex-wrap: wrap;
    margin-bottom: 3rem;
}

.hero__proof {
    display: flex; gap: 2.5rem; flex-wrap: wrap;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}
.hero__proof-num {
    font-family: var(--font-h);
    font-size: 1.6rem; font-weight: 900;
    letter-spacing: -.04em; color: var(--body); line-height: 1;
}
.hero__proof-label {
    font-size: .72rem; color: var(--muted);
    font-weight: 600; margin-top: .25rem;
}

/* Panneau droit — bleu, photo */
.hero__right {
    position: relative; overflow: hidden;
    background: var(--bordeaux-dark);
}
.hero__photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 20%;
    mix-blend-mode: luminosity; opacity: .4;
}
.hero__right-inner {
    position: relative; z-index: 1;
    height: 100%;
    display: flex; flex-direction: column;
    justify-content: flex-end; padding: 3rem 2.5rem;
}
.hero__vert {
    position: absolute;
    right: 2rem; top: 50%;
    transform: translateY(-50%) rotate(90deg);
    transform-origin: center;
    font-family: var(--font-h);
    font-size: .6rem; font-weight: 800;
    letter-spacing: .3em; text-transform: uppercase;
    color: rgba(255,255,255,.18); white-space: nowrap;
}
.hero__card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.13);
    border-radius: var(--radius);
    padding: 1.5rem 1.75rem;
    max-width: 300px;
    backdrop-filter: blur(8px);
}
.hero__card-eyebrow {
    font-family: var(--font-h);
    font-size: .64rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.45); margin-bottom: .7rem;
    display: flex; align-items: center; gap: .5rem;
}
.hero__card-eyebrow i { font-size: 1rem; color: var(--bordeaux); }
.hero__card-text {
    font-size: .92rem; line-height: 1.65;
    color: rgba(255,255,255,.82); margin: 0;
}
.hero__card-text strong { color: var(--cream); }

/******************** Stats band ********************/
.stats {
    background: var(--bordeaux-ink);
}
.stats__inner {
    display: grid;
    grid-template-columns: repeat(4,1fr);
}
.stats__cell {
    padding: 2.25rem 2rem;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.07);
}
.stats__cell:last-child { border-right: none; }
.stats__num {
    font-family: var(--font-h);
    font-size: clamp(2.2rem,3vw,3.2rem);
    font-weight: 900; line-height: 1;
    letter-spacing: -.04em; color: var(--cream);
    margin-bottom: .4rem;
}
.stats__desc {
    font-size: .68rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.38);
}

/******************** Services ********************/
.services {
    padding: var(--section) 0;
    background: var(--cream);
}
.services__hd {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4rem; align-items: center;
    padding-bottom: 3.5rem;
    margin-bottom: 0;
    border-bottom: 1px solid var(--border);
}
.services__hd-right {
    font-size: 1rem; line-height: 1.8;
    color: var(--muted);
}
.services__hd-right p { margin: 0 0 1.5rem; }

/* Lignes services — style liste éditoriale */
.svc {
    display: grid;
    grid-template-columns: 72px 1fr 28px;
    align-items: start; gap: 2rem;
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none; color: inherit;
    cursor: pointer;
    transition: background var(--t) var(--ease);
}
.svc:first-of-type { border-top: 1px solid var(--border); }

.svc__num {
    font-family: var(--font-h);
    font-size: .68rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); padding-top: .25rem;
    transition: color var(--t);
}
.svc__title {
    font-family: var(--font-h);
    font-size: clamp(1.2rem,2vw,1.6rem);
    font-weight: 900; letter-spacing: -.025em;
    line-height: 1.1; margin-bottom: .5rem;
    transition: color var(--t) var(--ease);
}
.svc__text {
    font-size: .9rem; line-height: 1.75;
    color: var(--muted); max-width: 540px;
    margin-bottom: .9rem;
}
.svc__tags { display: flex; gap: .45rem; flex-wrap: wrap; }
.svc__tag {
    font-family: var(--font-h);
    font-size: .63rem; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
    padding: .3em .8em;
    background: var(--off); color: var(--muted);
    border: 1px solid var(--border); border-radius: 2px;
}
.svc__arrow {
    font-size: 1.3rem; color: var(--muted);
    flex-shrink: 0; margin-top: .2rem;
    transition: transform .3s var(--ease), color var(--t);
}
.svc:hover .svc__num   { color: var(--bordeaux); }
.svc:hover .svc__title { color: var(--bordeaux); }
.svc:hover .svc__arrow { transform: translate(5px,-5px); color: var(--bordeaux); }

/******************** Méthode ********************/
.method {
    padding: var(--section) 0;
    background: var(--off);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.method__grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: clamp(3rem,7vw,8rem);
    align-items: center;
}
.method__visual { position: relative; }
.method__photo {
    width: 100%; aspect-ratio: 4/5;
    object-fit: cover; object-position: center 20%;
    border-radius: var(--radius);
}
/* Cadre bleu décalé derrière */
.method__visual::before {
    content: '';
    position: absolute;
    top: -1.25rem; right: -1.25rem;
    width: 55%; height: 42%;
    background: var(--bordeaux); z-index: -1;
    border-radius: var(--radius);
}
/* ambre #2 : badge note */
.method__badge {
    position: absolute;
    bottom: -1.5rem; left: -1.5rem;
    background: var(--gold);
    color: var(--bordeaux-ink);
    padding: 1.2rem 1.5rem;
    border-radius: var(--radius);
    font-family: var(--font-h); font-weight: 900;
    box-shadow: 0 12px 32px rgba(187,140,53,.3);
}
.method__badge-n {
    font-size: 2.4rem; line-height: 1;
    letter-spacing: -.04em;
}
.method__badge-l {
    font-size: .62rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    opacity: .85; margin-top: .25rem;
}

.method__content {}
.method__steps { margin-top: 2.5rem; }
.step {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 1.25rem; align-items: start;
    padding: 1.75rem 0;
    border-bottom: 1px solid var(--border);
}
.step:first-child { border-top: 1px solid var(--border); }
.step__n {
    font-family: var(--font-h);
    font-size: .68rem; font-weight: 800;
    letter-spacing: .1em; color: var(--bordeaux);
    padding-top: .15rem;
}
.step__title {
    font-size: 1rem; font-weight: 800; letter-spacing: -.01em;
    margin-bottom: .35rem; line-height: 1.3;
}
.step__body {
    font-size: .88rem; line-height: 1.7;
    color: var(--muted); margin: 0;
}

/******************** Matières ********************/
.subjects {
    padding: 4rem 0;
    border-top: 1px solid var(--border);
}
.subjects__wrap {
    display: flex; gap: 3.5rem; align-items: flex-start;
}
.subjects__aside {
    flex-shrink: 0; width: 200px;
    padding-top: .2rem;
}
.subjects__aside-title {
    font-size: 1.1rem; font-weight: 900;
    letter-spacing: -.02em; margin-bottom: .5rem;
}
.subjects__aside-sub {
    font-size: .8rem; color: var(--muted);
    line-height: 1.65; margin: 0;
}
.chips { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1; }
.chip {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5em 1em;
    font-family: var(--font-h);
    font-size: .68rem; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--body);
    border: 1.5px solid var(--border);
    border-radius: 2px;
    transition: all var(--t) var(--ease);
    cursor: default;
}
.chip i { color: var(--bordeaux); font-size: .9rem; }
.chip:hover {
    background: var(--bordeaux); color: var(--cream);
    border-color: var(--bordeaux);
}
.chip:hover i { color: var(--cream); }

/******************** Témoignages ********************/
.testimonials {
    padding: var(--section) 0;
    background: var(--bordeaux-dark);
}
.testimonials__hd {
    display: flex; align-items: flex-end;
    justify-content: space-between;
    padding-bottom: 3rem; margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.1);
}
.testimonials__title {
    font-size: clamp(2rem,3vw,.5rem);
    font-weight: 900; letter-spacing: -.03em;
    color: var(--cream); margin: 0;
    font-size: clamp(2rem,3vw + .5rem, 3rem);
}
.testimonials__meta {
    flex-shrink: 0; text-align: right;
}
/* ambre #3 : étoiles */
.testimonials__stars {
    color: var(--gold);
    font-size: 1rem; letter-spacing: .08em;
    line-height: 1; margin-bottom: .25rem;
    display: block;
}
.testimonials__stars-sub {
    font-family: var(--font-h);
    font-size: .64rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.35);
}

.tgrid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px; background: rgba(255,255,255,.07);
    margin-top: 0;
}
.tcard {
    background: var(--bordeaux-dark);
    padding: 2.75rem 2.25rem;
    transition: background var(--t) var(--ease);
}
.tcard:hover { background: rgba(255,255,255,.04); }
.tcard__quote {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 3rem; line-height: .8;
    color: var(--bordeaux); display: block;
    margin-bottom: .75rem; user-select: none;
}
.tcard__text {
    font-size: .92rem; line-height: 1.82;
    color: rgba(255,255,255,.72);
    font-style: italic; margin-bottom: 2rem;
}
.tcard__author { display: flex; align-items: center; gap: .85rem; }
.tcard__av {
    width: 40px; height: 40px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.14);
    background: var(--bordeaux);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-h); font-weight: 900;
    font-size: .78rem; color: var(--cream);
    flex-shrink: 0;
}
.tcard__name {
    font-family: var(--font-h); font-weight: 800;
    font-size: .84rem; color: var(--cream); line-height: 1.2;
}
.tcard__role {
    font-size: .7rem; color: rgba(255,255,255,.38);
    margin-top: .15rem;
}

/******************** CTA ********************/
.cta {
    padding: var(--section) 0;
    background: var(--bordeaux);
    position: relative; overflow: hidden;
}
.cta::before {
    content: '';
    position: absolute;
    right: -4%; top: -80%;
    width: 700px; height: 700px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.07);
    pointer-events: none;
}
.cta__inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4rem; align-items: center;
    position: relative; z-index: 1;
}
.cta__title {
    font-size: clamp(2rem,3.5vw,3.5rem);
    font-weight: 900; letter-spacing: -.035em;
    color: var(--cream); line-height: 1.05;
    margin-bottom: .75rem;
}
.cta__desc {
    font-size: 1rem; line-height: 1.75;
    color: rgba(255,255,255,.68);
    max-width: 480px; margin: 0;
}
.cta__actions {
    display: flex; flex-direction: column;
    gap: .75rem; flex-shrink: 0; align-items: flex-start;
}

/******************** Footer ********************/
.footer {
    background: var(--black);
    padding: 5rem 0 2.5rem;
}
.footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 3rem;
    padding-bottom: 3.5rem; margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer__logo-img {
    height: 30px; width: auto;
    filter: brightness(0) invert(1);
    margin-bottom: 1.25rem;
}
.footer__desc {
    font-size: .83rem; line-height: 1.75;
    color: rgba(255,255,255,.35);
    max-width: 230px; margin-bottom: 1.5rem;
}
.footer__social { display: flex; gap: .5rem; margin-top: 1.25rem; }
.footer__soc {
    width: 34px; height: 34px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.4); font-size: 1rem;
    text-decoration: none;
    transition: all var(--t) var(--ease);
}
.footer__soc:hover {
    background: var(--bordeaux); border-color: var(--bordeaux); color: var(--cream);
}

/* eduQua — même traitement discret que sur interlangues.ch : carte
   quasi transparente, logo neutralisé en blanc atténué (peu importe
   ses couleurs propres) plutôt qu'un badge qui capte le regard. */
.footer__eduqua {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius);
    background: rgba(255,255,255,.03);
    max-width: 280px;
    margin-top: 1.5rem;
}
.footer__eduqua-logo {
    width: 40px; height: 40px; flex-shrink: 0;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: .55;
}
.footer__eduqua strong {
    display: block; font-family: var(--font-h); font-weight: 800;
    font-size: .8rem; color: rgba(255,255,255,.75);
}
.footer__eduqua span {
    display: block; font-size: .74rem; color: rgba(255,255,255,.4); margin-top: .1rem;
}

.footer__col-h {
    font-family: var(--font-h);
    font-size: .64rem; font-weight: 800;
    letter-spacing: .15em; text-transform: uppercase;
    color: rgba(255,255,255,.25); margin-bottom: 1.25rem;
}
.footer__links { display: flex; flex-direction: column; gap: .55rem; }
.footer__lnk {
    font-size: .83rem;
    color: rgba(255,255,255,.48);
    text-decoration: none;
    transition: color var(--t) var(--ease);
}
/* ambre #4 : hover liens footer */
.footer__lnk:hover { color: var(--gold); }

.footer__ct-line {
    display: flex; align-items: flex-start;
    gap: .6rem; margin-bottom: .65rem;
    font-size: .83rem; color: rgba(255,255,255,.48);
}
.footer__ct-line i { color: var(--bordeaux); font-size: .95rem; flex-shrink: 0; margin-top: .15rem; }
.footer__ct-line a { color: inherit; text-decoration: none; }
.footer__ct-line a:hover { color: var(--cream); }

.footer__bottom {
    display: flex; align-items: center;
    justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.footer__copy,
.footer__credit { font-size: .73rem; color: rgba(255,255,255,.2); }
.footer__credit a { color: rgba(255,255,255,.42); text-decoration: none; font-weight: 700; }
.footer__credit a:hover { color: var(--cream); }

/******************** Scroll reveal ********************/
.reveal {
    opacity: 0; transform: translateY(24px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/******************** Responsive ********************/
@media (max-width: 991px) {
    .nav__links {
        display: none;
        position: absolute; top: 66px; left: 0; right: 0;
        flex-direction: column; align-items: flex-start; gap: 0;
        background: var(--cream);
        border-top: 2px solid var(--bordeaux);
        border-bottom: 1px solid var(--border);
        padding: .5rem 0;
        box-shadow: 0 16px 40px rgba(0,0,0,.1);
        z-index: 100;
    }
    .nav__links.open { display: flex; }
    .nav__link { padding: .9rem 1.5rem; width: 100%; border-bottom: none; font-size: .85rem; }
    .nav__cta { display: none; }
    .nav__toggle { display: flex; }

    .hero { grid-template-columns: 1fr; min-height: auto; }
    .hero__right { min-height: 300px; }
    .hero__vert { display: none; }
    .hero__left { padding: 3.5rem 2rem; border-right: none; }

    .stats__inner { grid-template-columns: repeat(2,1fr); }
    .stats__cell { border-right: none; border-bottom: 1px solid rgba(255,255,255,.07); }
    .stats__cell:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.07); }
    .stats__cell:nth-last-child(-n+2) { border-bottom: none; }

    .services__hd { grid-template-columns: 1fr; gap: 1.5rem; }
    .svc { grid-template-columns: 56px 1fr 24px; gap: 1rem; }

    .method__grid { grid-template-columns: 1fr; }
    .method__visual { max-width: 480px; }
    .method__badge { bottom: -1rem; left: 1rem; }

    .subjects__wrap { flex-direction: column; gap: 1.5rem; }
    .subjects__aside { width: 100%; }

    .tgrid { grid-template-columns: 1fr; }
    .testimonials__hd { flex-direction: column; align-items: flex-start; gap: 1rem; }

    .cta__inner { grid-template-columns: 1fr; gap: 2.5rem; }

    .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 575px) {
    .hero__left::before { display: none; }
    .hero__actions { flex-direction: column; }
    .hero__proof { gap: 1.5rem; }
    .svc { grid-template-columns: 1fr; }
    .svc__num, .svc__arrow { display: none; }
    .footer__grid { grid-template-columns: 1fr; }
    .footer__bottom { flex-direction: column; align-items: flex-start; }
    .cta__actions { width: 100%; }
    .cta__actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   Aide aux devoirs — styles spécifiques v3
   ============================================================ */

/* ══════════════════════════════════════════════════
   PAGE HEADER
══════════════════════════════════════════════════ */
.devoirs-header {
    background: var(--bordeaux-ink);
    min-height: 70vh;
    display: grid;
    grid-template-columns: 55fr 45fr;
    overflow: hidden;
    position: relative;
}
.devoirs-header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--bordeaux);
    z-index: 3;
}

/* Panneau gauche */
.devoirs-header__left {
    display: flex; flex-direction: column;
    padding: 3.5rem clamp(2rem, 5vw, 5rem) 0;
    z-index: 1;
}
.devoirs-header__center {
    flex: 1;
    display: flex; flex-direction: column; justify-content: center;
}

.devoirs-header__breadcrumb {
    display: flex; align-items: center; gap: .45rem;
    font-family: var(--font-h);
    font-size: .64rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.28);
    margin-bottom: 2.5rem;
}
.devoirs-header__breadcrumb a { text-decoration: none; color: inherit; transition: color var(--t); }
.devoirs-header__breadcrumb a:hover { color: rgba(255,255,255,.7); }
.devoirs-header__breadcrumb i { font-size: .7rem; }

.devoirs-header__title {
    font-size: clamp(3.8rem, 6.5vw + .5rem, 8rem);
    font-weight: 900; line-height: .9;
    letter-spacing: -.055em;
    color: var(--cream);
    margin-bottom: 0;
}

/* "devoirs." = blanc avec soulignement ambre thick */
.devoirs-header__title-accent {
    display: block;
    color: var(--cream);           /* ← blanc, PAS bleu sur fond sombre */
    position: relative;
    width: fit-content;
}
.devoirs-header__title-accent::after {
    content: '';
    position: absolute;
    left: 0; bottom: .08em;
    width: 100%; height: .1em;     /* plus épais */
    background: var(--gold);      /* ambre #1 */
    border-radius: 2px;
    transform-origin: left;
    animation: underline-grow .7s .3s var(--ease) both;
}
@keyframes underline-grow {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.devoirs-header__lead {
    font-size: 1rem; line-height: 1.82;
    color: rgba(255,255,255,.5);
    max-width: 380px;
    margin-top: 2.25rem;
}

.devoirs-header__actions {
    display: flex; gap: 1rem; flex-wrap: wrap;
    margin-top: 2.25rem;
}

/* Stats en pied de panneau */
.devoirs-header__bottom {
    display: flex;
    border-top: 1px solid rgba(255,255,255,.07);
    margin-top: 3rem;
}
.devoirs-header__stat {
    flex: 1;
    padding: 1.75rem 1.25rem 1.75rem 0;
    border-right: 1px solid rgba(255,255,255,.07);
    display: flex; flex-direction: column; gap: .3rem;
    text-align: center;
}
.devoirs-header__stat:last-child { border-right: none; }
.devoirs-header__stat-n {
    font-family: var(--font-h);
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);   /* plus grand */
    font-weight: 900;
    letter-spacing: -.05em; color: var(--cream);
    line-height: 1;
}
.devoirs-header__stat-l {
    font-family: var(--font-h);
    font-size: .6rem; font-weight: 800;
    letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255,255,255,.3);
}

/* Panneau droit */
.devoirs-header__right { position: relative; overflow: hidden; }
.devoirs-header__photo {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 20%;
}
.devoirs-header__photo-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        110deg,
        rgba(26,9,15,.9) 0%,
        rgba(123,31,61,.22) 55%,
        rgba(26,9,15,.1) 100%
    );
    z-index: 1;
}
/* Texture grain subtile sur la photo */
.devoirs-header__photo-overlay::after {
    content: '';
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
    opacity: .4;
}

.devoirs-header__badge {
    position: absolute;
    bottom: 2.5rem; left: 2rem;
    z-index: 2;
    background: var(--cream);
    color: var(--body);
    padding: .9rem 1.35rem;
    border-radius: var(--radius);
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--font-h);
    font-size: .68rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.devoirs-header__badge i { color: var(--bordeaux); font-size: 1.1rem; }

.devoirs-header__metas {
    position: absolute;
    bottom: 2.5rem; right: 0;
    z-index: 2;
    display: flex; flex-direction: column; gap: 1px;
    width: 170px;
}
.devoirs-header__meta {
    background: rgba(26,9,15,.75);
    backdrop-filter: blur(12px);
    padding: .75rem 1rem;
    display: flex; align-items: center; gap: .6rem;
    font-family: var(--font-h);
    font-size: .62rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.72);
    border-left: 2px solid var(--bordeaux);
}
.devoirs-header__meta i { font-size: .9rem; color: var(--bordeaux); flex-shrink: 0; }

/* ══════════════════════════════════════════════════
   INTRO — liste éditoriale numérotée
══════════════════════════════════════════════════ */
.ad-intro {
    padding: var(--section) 0;
    background: var(--cream);
}
.ad-intro__header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem; align-items: center;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--border);
}
.ad-intro__header-right {
    font-size: 1rem; line-height: 1.82; color: var(--muted);
}
.ad-intro__header-right p { margin: 0; }

.reasons {}
.reason {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 2.5rem;
    padding: 3.25rem 0;
    border-bottom: 1px solid var(--border);
    align-items: start;
    position: relative;
    overflow: hidden;
}

/* Barre bleue gauche qui glisse au hover */
.reason::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--bordeaux);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .4s var(--ease);
}
.reason:hover::before { transform: scaleY(1); }

/* Flash fond subtil */
.reason::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(123,31,61,.04) 0%, transparent 60%);
    opacity: 0;
    transition: opacity .4s var(--ease);
}
.reason:hover::after { opacity: 1; }

.reason__n {
    font-family: var(--font-h);
    font-size: clamp(4rem, 6vw, 6.5rem);
    font-weight: 900;
    line-height: .85;
    letter-spacing: -.06em;
    color: var(--border);
    padding-top: .05rem;
    transition: color .4s var(--ease);
    position: relative; z-index: 1;
    user-select: none;
}
.reason:hover .reason__n { color: rgba(123,31,61,.18); }

.reason__body { position: relative; z-index: 1; padding-top: .5rem; }
.reason__title {
    font-family: var(--font-h);
    font-size: clamp(1.15rem, 1.6vw, 1.5rem);
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: .65rem;
    transition: color .3s var(--ease);
}
.reason:hover .reason__title { color: var(--bordeaux); }
.reason__text {
    font-size: .9rem; line-height: 1.82;
    color: var(--muted); margin: 0;
}

/* ══════════════════════════════════════════════════
   AVANT / APRÈS — section émotionnelle split
══════════════════════════════════════════════════ */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
}
.split__side {
    padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 5rem);
    display: flex; flex-direction: column;
    justify-content: center;
}
.split__side--before {
    background: var(--bordeaux-ink);
    position: relative;
    overflow: hidden;
}
/* "Sans" en watermark */
.split__side--before::before {
    content: 'AVANT';
    position: absolute;
    bottom: -1rem; right: -1rem;
    font-family: var(--font-h);
    font-size: 8rem; font-weight: 900;
    letter-spacing: -.06em;
    color: rgba(255,255,255,.04);
    line-height: 1;
    pointer-events: none; user-select: none;
}
.split__side--after {
    background: var(--off);
    border-left: 1px solid var(--border);
}

.split__label {
    font-family: var(--font-h);
    font-size: .68rem; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
    margin-bottom: 1.5rem;
    display: flex; align-items: center; gap: .5rem;
}
.split__side--before .split__label { color: rgba(255,255,255,.35); }
.split__side--before .split__label::before { content: ''; width: 20px; height: 1px; background: rgba(255,255,255,.25); }
.split__side--after  .split__label { color: var(--bordeaux); }
.split__side--after  .split__label::before { content: ''; width: 20px; height: 2px; background: var(--gold); }

.split__title {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 900; letter-spacing: -.03em;
    line-height: 1.1; margin-bottom: 2rem;
}
.split__side--before .split__title { color: rgba(255,255,255,.55); }
.split__side--after  .split__title { color: var(--body); }

.split__list {
    display: flex; flex-direction: column; gap: .85rem;
}
.split__item {
    display: flex; align-items: flex-start; gap: .85rem;
    font-size: .9rem; line-height: 1.65;
}
.split__side--before .split__item { color: rgba(255,255,255,.5); }
.split__side--after  .split__item { color: var(--body); }

.split__icon {
    flex-shrink: 0; font-size: 1rem;
    margin-top: .1rem;
}
.split__side--before .split__icon { color: rgba(255,255,255,.2); }
.split__side--after  .split__icon { color: var(--bordeaux); }

/* ══════════════════════════════════════════════════
   PULL QUOTE — sur fond bleu foncé (pas le même que CTA)
══════════════════════════════════════════════════ */
.pullquote {
    background: var(--bordeaux-dark);    /* bleu foncé, pas primaire */
    padding: clamp(4rem, 8vw, 7rem) 0;
    position: relative; overflow: hidden;
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.pullquote::before {
    content: '\201C';
    position: absolute;
    left: -1rem; top: -6rem;
    font-family: Georgia, serif;
    font-size: 40rem; line-height: 1;
    color: rgba(255,255,255,.04);
    pointer-events: none; user-select: none;
    line-height: .7;
}
.pullquote__inner {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 5rem; align-items: end;
    position: relative; z-index: 1;
}
.pullquote__text {
    font-family: var(--font-h);
    font-size: clamp(1.5rem, 2.8vw, 2.6rem);
    font-weight: 800; line-height: 1.3;
    letter-spacing: -.03em;
    color: var(--cream); margin: 0;
}
/* Emphase ambre — #2 sur la page */
.pullquote__text em {
    font-style: normal; font-weight: 900;
    color: var(--cream);
    background: linear-gradient(transparent 70%, rgba(187,140,53,.45) 70%);
    padding: 0 .05em;
}
.pullquote__source {
    flex-shrink: 0;
    padding-bottom: .25rem;
    border-bottom: 2px solid rgba(255,255,255,.1);
}
.pullquote__name {
    font-family: var(--font-h); font-weight: 900;
    font-size: .9rem; color: var(--cream);
    margin-bottom: .3rem;
}
.pullquote__role {
    font-size: .75rem; line-height: 1.55;
    color: rgba(255,255,255,.45);
}

/* ══════════════════════════════════════════════════
   FORMATS — plans horizontaux
══════════════════════════════════════════════════ */
.formats {
    padding: var(--section) 0;
    background: var(--cream);
}
.formats__hd {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4rem; align-items: center;
    padding-bottom: 4rem;
    border-bottom: 1px solid var(--border);
}
.formats__note {
    font-size: .82rem; color: var(--muted);
    line-height: 1.75; margin: 0;
}

/* Plans en lignes horizontales */
.plan {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 3rem; align-items: center;
    padding: 2.75rem 0;
    border-bottom: 1px solid var(--border);
    position: relative;
}
.plan:first-of-type { border-top: 1px solid var(--border); }

/* Ligne bleue gauche au hover */
.plan::before {
    content: '';
    position: absolute;
    left: -3rem; top: 0; bottom: 0;
    width: 3px; background: var(--bordeaux);
    transform: scaleY(0); transform-origin: top;
    transition: transform .35s var(--ease);
}
.plan:hover::before { transform: scaleY(1); }

/* Plan featured — fond pleine largeur */
.plan--featured {
    background: var(--bordeaux-dark);
    padding: 3rem 3rem;
    margin: 0 -3rem;
    border-top: none !important;
    border-bottom: none !important;
}
.plan--featured::before { display: none; }
.plan--featured + .plan { border-top: none; }
.plan--featured .plan__name   { color: var(--cream); }
.plan--featured .plan__desc   { color: rgba(255,255,255,.55); }
.plan--featured .plan__tags   { border-top-color: rgba(255,255,255,.1); }
.plan--featured .plan__tag    { background: rgba(255,255,255,.08); color: rgba(255,255,255,.58); border-color: rgba(255,255,255,.1); }
.plan--featured .plan__from   { color: rgba(255,255,255,.38); }
.plan--featured .plan__price  { color: var(--cream); }
.plan--featured .plan__period { color: rgba(255,255,255,.4); }
.plan--featured .plan__badge  { display: inline-flex; }

.plan__header {
    display: flex; align-items: center;
    gap: 1rem; margin-bottom: .65rem;
}
.plan__name {
    font-family: var(--font-h);
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    font-weight: 900; letter-spacing: -.03em;
    color: var(--body); line-height: 1;
    transition: color .25s;
}
.plan:hover:not(.plan--featured) .plan__name { color: var(--bordeaux); }

/* Badge ambre — #3 sur la page */
.plan__badge {
    display: none; align-items: center; gap: .3em;
    background: var(--gold);
    color: var(--bordeaux-ink);
    font-family: var(--font-h);
    font-size: .58rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    padding: .35em .9em; border-radius: 2px;
    white-space: nowrap;
}
.plan__badge i { font-size: .8rem; }

.plan__desc {
    font-size: .88rem; line-height: 1.78;
    color: var(--muted); max-width: 500px;
    margin-bottom: 1.25rem;
}
.plan__tags {
    display: flex; flex-wrap: wrap; gap: .4rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.plan__tag {
    font-family: var(--font-h);
    font-size: .6rem; font-weight: 800;
    letter-spacing: .07em; text-transform: uppercase;
    padding: .3em .8em;
    background: var(--off); color: var(--muted);
    border: 1px solid var(--border); border-radius: 2px;
}

/* Prix — colonne droite, dominant */
.plan__right {
    text-align: right; flex-shrink: 0; min-width: 150px;
}
.plan__from {
    font-family: var(--font-h);
    font-size: .6rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted); display: block; margin-bottom: .15rem;
}
.plan__price {
    font-family: var(--font-h);
    font-size: clamp(2.5rem, 4vw, 4rem);   /* plus grand */
    font-weight: 900;
    letter-spacing: -.06em; line-height: 1;
    color: var(--body);
}
.plan__period {
    display: block;
    font-family: var(--font-h);
    font-size: .66rem; font-weight: 700;
    letter-spacing: .06em; color: var(--muted);
    margin-top: .3rem;
}
.plan__cta {
    display: inline-flex; align-items: center; gap: .35em;
    margin-top: 1rem;
    font-family: var(--font-h);
    font-size: .7rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--bordeaux); text-decoration: none;
    transition: gap .25s var(--ease), color .2s;
}
.plan--featured .plan__cta { color: rgba(255,255,255,.7); }
.plan__cta:hover { gap: .65em; color: var(--bordeaux-mid); }
.plan--featured .plan__cta:hover { color: var(--cream); }

/* ══════════════════════════════════════════════════
   HORAIRES & LIEUX
══════════════════════════════════════════════════ */
.logistics {
    padding: var(--section) 0;
    background: var(--off);
    border-top: 1px solid var(--border);
}
.logistics__grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 5rem; align-items: start;
}

/* Timeline horaire */
.ad-timeline {
    display: flex; flex-direction: column; gap: 0;
    margin-top: 2.5rem;
    position: relative;
}

/* Ligne verticale — centrée sur la colonne du dot (col 2 = 80px + 40px/2 = 100px from left) */
.ad-timeline::before {
    content: '';
    position: absolute;
    /* col1 = 80px, gap = 16px, dot col = 40px → center of dot = 80+16+20 = 116px */
    left: 116px; top: 0; bottom: 0;
    width: 1px;
    background: var(--border);
    z-index: 0;
}

/* Grille 3 colonnes : temps | zone-dot | infos */
.tslot {
    display: grid;
    grid-template-columns: 80px 40px 1fr;
    gap: 0 1rem;
    padding-bottom: 2.5rem;
    align-items: start;
}
.tslot:last-child { padding-bottom: 0; }

/* Dot — dans la colonne centrale, pas en absolu */
.tslot__dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--bordeaux);
    border: 3px solid var(--off);
    margin-top: 4px;
    /* centre horizontalement dans la colonne de 40px */
    justify-self: center;
    position: relative; z-index: 1;
    transition: transform .2s var(--ease);
}
.tslot--first .tslot__dot {
    background: var(--cream);
    border: 3px solid var(--bordeaux);
    box-shadow: 0 0 0 4px rgba(123,31,61,.15);
}
.tslot:hover .tslot__dot { transform: scale(1.4); }

/* Colonne 1 : heure, alignée à droite */
.tslot__time-wrap {
    text-align: right;
    padding-top: .05rem;
}
.tslot__time {
    font-family: var(--font-h);
    font-size: .95rem; font-weight: 900;
    letter-spacing: -.02em; color: var(--body);
    line-height: 1; display: block;
}
.tslot__label-small {
    font-size: .62rem; color: var(--muted);
    font-weight: 600; margin-top: .2rem;
    display: block; white-space: nowrap;
}

/* Colonne 3 : nom + durée */
.tslot__info { padding-top: .05rem; }
.tslot__name {
    font-family: var(--font-h);
    font-size: .85rem; font-weight: 800;
    color: var(--body); margin-bottom: .3rem;
    line-height: 1.2;
}
.tslot__dur {
    font-family: var(--font-h);
    font-size: .6rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted);
    padding: .28em .7em;
    border: 1px solid var(--border);
    border-radius: 2px; display: inline-block;
}

/* Liste lieux */
.locs { margin-top: 2.5rem; }
.loc {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem; align-items: center;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border);
    transition: background var(--t) var(--ease);
}
.loc:first-child { border-top: 1px solid var(--border); }

.loc__indicator {
    width: 3px; height: 36px;
    background: var(--bordeaux);
    border-radius: 2px; flex-shrink: 0;
}
.loc__indicator--muted { background: var(--border); }

.loc__text {}
.loc__name {
    font-family: var(--font-h);
    font-size: .9rem; font-weight: 800;
    letter-spacing: -.01em; color: var(--body);
    line-height: 1.2;
}
.loc__addr { font-size: .74rem; color: var(--muted); margin-top: .15rem; }

.loc__pill {
    font-family: var(--font-h);
    font-size: .58rem; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase;
    padding: .3em .8em; border-radius: 2px;
    flex-shrink: 0;
}
.loc__pill--open { background: rgba(123,31,61,.1); color: var(--bordeaux); }
.loc__pill--web  { background: var(--cream); color: var(--muted); border: 1px solid var(--border); }

/* ══════════════════════════════════════════════════
   FAQ
══════════════════════════════════════════════════ */
.ad-faq {
    padding: var(--section) 0;
    background: var(--cream);
    border-top: 1px solid var(--border);
}
.ad-faq__grid {
    display: grid; grid-template-columns: 1fr 2fr;
    gap: 6rem; align-items: start;
}
.ad-faq__aside { position: sticky; top: 88px; }
.ad-faq__aside-sub {
    font-size: .9rem; line-height: 1.82;
    color: var(--muted); margin-bottom: 2rem;
}

.acc-item { border-bottom: 1px solid var(--border); }
.acc-item:first-child { border-top: 1px solid var(--border); }

.acc-btn {
    width: 100%; background: none; border: none;
    display: flex; align-items: center;
    justify-content: space-between; gap: 1.5rem;
    padding: 1.6rem 0; cursor: pointer; text-align: left;
}
.acc-question {
    font-family: var(--font-h);
    font-size: .95rem; font-weight: 800;
    letter-spacing: -.01em; color: var(--body); line-height: 1.3;
    transition: color var(--t);
}
.acc-item.open .acc-question,
.acc-btn:hover .acc-question { color: var(--bordeaux); }

.acc-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border: 1.5px solid var(--border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: var(--bordeaux);
    transition: transform .3s var(--ease), background .25s, border-color .25s;
    flex-shrink: 0;
}
.acc-item.open .acc-icon {
    transform: rotate(45deg);
    background: var(--bordeaux);
    border-color: var(--bordeaux);
    color: var(--cream);
}

.acc-body {
    max-height: 0; overflow: hidden;
    transition: max-height .45s var(--ease);
}
.acc-item.open .acc-body { max-height: 600px; }
.acc-body__inner {
    padding-bottom: 1.75rem;
    font-size: .9rem; line-height: 1.82; color: var(--muted);
}
.acc-body__inner p { margin-bottom: .75rem; }
.acc-body__inner p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════
   BANDEAU PHOTO — pleine largeur avec légende (à propos)
══════════════════════════════════════════════════ */
.about-photo {
    position: relative;
    height: 440px;
    overflow: hidden;
    background: var(--bordeaux-ink);
}
.about-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.about-photo__caption {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 2rem;
    background: linear-gradient(transparent, rgba(26,9,15,.88) 85%);
    color: var(--cream);
}
.about-photo__caption p {
    max-width: 640px;
    font-family: var(--font-h); font-weight: 700;
    font-size: 1.05rem; line-height: 1.5;
}
@media (max-width: 700px) {
    .about-photo { height: 300px; }
}

/* ══════════════════════════════════════════════════
   CONTACT
══════════════════════════════════════════════════ */
.contact-header {
    padding: 4rem 0 3.5rem;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
}
.contact-header__breadcrumb {
    display: flex; align-items: center; gap: .45rem;
    font-family: var(--font-h);
    font-size: .64rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 2rem;
}
.contact-header__breadcrumb a { text-decoration: none; color: inherit; transition: color var(--t); }
.contact-header__breadcrumb a:hover { color: var(--bordeaux); }
.contact-header__breadcrumb i { font-size: .68rem; }

.contact-header__grid {
    display: grid; grid-template-columns: 1.3fr 1fr;
    gap: 3rem; align-items: end;
}
.contact-header__title { font-size: clamp(2.3rem, 4.2vw, 3.5rem); margin-bottom: 1.1rem; }
.contact-header__lead { font-size: 1.02rem; line-height: 1.8; color: var(--muted); max-width: 480px; }

.contact-header__badge {
    justify-self: end;
    display: flex; align-items: center; gap: .85rem;
    background: var(--off);
    border-left: 3px solid var(--gold);
    padding: 1.1rem 1.5rem;
    max-width: 280px;
}
.contact-header__badge i { color: var(--gold); font-size: 1.6rem; flex-shrink: 0; }
.contact-header__badge-title { font-family: var(--font-h); font-weight: 800; font-size: .82rem; color: var(--body); }
.contact-header__badge-sub { font-size: .74rem; color: var(--muted); margin-top: .1rem; }

.contact { padding: var(--section) 0; background: var(--cream); }
.contact__grid {
    display: grid; grid-template-columns: 1.2fr 1fr;
    gap: 4.5rem; align-items: start;
}

.contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

.contact-form__check {
    display: flex; align-items: flex-start; gap: .65rem;
    font-size: .82rem; color: var(--muted); line-height: 1.6;
    margin: 1.75rem 0 1.5rem;
}
.contact-form__check input {
    margin-top: .2rem; accent-color: var(--bordeaux); flex-shrink: 0;
    width: 16px; height: 16px;
}
.contact-form__note {
    font-size: .78rem; color: var(--muted);
    margin-top: 1.1rem; display: flex; align-items: center; gap: .5rem;
}
.contact-form__note i { color: var(--gold); }

.contact-info__eyebrow { margin-bottom: 1.5rem; }
.contact-info__card {
    background: var(--off);
    padding: 2rem 2rem 1.6rem;
    margin-bottom: 2.5rem;
}
.contact-info__line { display: flex; align-items: flex-start; gap: .9rem; margin-bottom: 1.35rem; }
.contact-info__line:last-child { margin-bottom: 0; }
.contact-info__line i { color: var(--gold); font-size: 1.15rem; margin-top: .15rem; flex-shrink: 0; }
.contact-info__line strong {
    display: block; font-family: var(--font-h); font-weight: 800;
    font-size: .8rem; letter-spacing: -.01em; color: var(--body); margin-bottom: .2rem;
}
.contact-info__line span, .contact-info__line a {
    font-size: .87rem; color: var(--muted); text-decoration: none; line-height: 1.6;
}
.contact-info__line a:hover { color: var(--bordeaux); }

@media (max-width: 900px) {
    .contact-header__grid { grid-template-columns: 1fr; gap: 1.75rem; }
    .contact-header__badge { justify-self: start; max-width: none; }
    .contact__grid { grid-template-columns: 1fr; gap: 3rem; }
    .contact-form__row { grid-template-columns: 1fr; }
}


.legal-header {
    padding: 3.25rem 0 2.75rem;
    background: var(--cream);
    border-bottom: 1px solid var(--border);
}
.legal-header__breadcrumb {
    display: flex; align-items: center; gap: .45rem;
    font-family: var(--font-h);
    font-size: .64rem; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 1.5rem;
}
.legal-header__breadcrumb a { text-decoration: none; color: inherit; transition: color var(--t); }
.legal-header__breadcrumb a:hover { color: var(--bordeaux); }
.legal-header__breadcrumb i { font-size: .68rem; }

.legal-header__title { font-size: clamp(2.1rem, 4vw, 3.1rem); margin-bottom: .85rem; }

.legal-header__meta {
    display: flex; align-items: center; gap: .55rem;
    font-size: .85rem; color: var(--muted);
}
.legal-header__meta i { color: var(--gold); font-size: 1rem; }

.legal {
    padding: var(--section) 0;
    background: var(--cream);
}
.legal__intro {
    font-size: 1rem; line-height: 1.85; color: var(--muted);
    max-width: 760px;
    padding-bottom: 3rem; margin-bottom: 3.5rem;
    border-bottom: 1px solid var(--border);
}
.legal__grid {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 5rem;
    align-items: start;
}
.legal__toc { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; }
.legal__toc-list { display: flex; flex-direction: column; margin-top: 1.25rem; }
.legal__toc-link {
    display: flex; align-items: baseline; gap: .65rem;
    padding: .6rem 0;
    font-size: .82rem; color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: color var(--t) var(--ease), padding-left var(--t) var(--ease);
}
.legal__toc-link:hover { color: var(--bordeaux); padding-left: .3rem; }
.legal__toc-num {
    font-family: var(--font-h); font-weight: 800;
    font-size: .66rem; color: var(--gold);
    flex-shrink: 0;
}

.legal__section {
    padding: 2.5rem 0;
    border-bottom: 1px solid var(--border);
    scroll-margin-top: 90px;
}
.legal__section:first-of-type { border-top: 1px solid var(--border); }
.legal__section-head {
    display: flex; align-items: baseline; gap: 1.25rem;
    margin-bottom: 1.1rem;
}
.legal__section-n {
    font-family: var(--font-h);
    font-size: 1.7rem; font-weight: 900;
    letter-spacing: -.03em;
    color: var(--border); line-height: 1;
    flex-shrink: 0;
}
.legal__section-title { font-size: clamp(1.15rem, 1.8vw, 1.5rem); margin-bottom: 0; }
.legal__section-body {
    font-size: .92rem; line-height: 1.85;
    color: var(--muted);
    max-width: 700px;
}
.legal__section-body p { margin-bottom: 1rem; }
.legal__section-body p:last-child { margin-bottom: 0; }
.legal__section-body ul { margin: .5rem 0 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.legal__section-body li { position: relative; padding-left: 1.35rem; }
.legal__section-body li::before {
    content: ''; position: absolute; left: 0; top: .58em;
    width: 6px; height: 6px; background: var(--gold);
}
.legal__section-body li strong,
.legal__section-body p strong { color: var(--body); font-weight: 800; }
.legal__section-body a { color: var(--bordeaux); text-decoration: underline; text-underline-offset: .15em; }
.legal__section-body a:hover { color: var(--bordeaux-mid); }

/* Encart d'attention (ex : point à valider avant publication) */
.legal__highlight {
    display: flex; gap: .85rem; align-items: flex-start;
    background: var(--off);
    border-left: 3px solid var(--gold);
    padding: 1.1rem 1.4rem;
    margin: 0 0 1.5rem;
    font-size: .85rem; line-height: 1.75; color: var(--body);
}
.legal__highlight i { color: var(--gold); font-size: 1.1rem; margin-top: .1rem; flex-shrink: 0; }

.legal__table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0 1.5rem;
    font-size: .85rem;
}
.legal__table th, .legal__table td {
    text-align: left;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.legal__table th {
    font-family: var(--font-h);
    font-size: .64rem; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--bordeaux);
    border-bottom: 2px solid var(--bordeaux);
}
.legal__table td { color: var(--muted); line-height: 1.6; }
.legal__table tr:last-child td { border-bottom: none; }
.legal__table td:first-child { color: var(--body); font-weight: 700; white-space: nowrap; }

@media (max-width: 900px) {
    .legal__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .legal__toc { position: static; }
    .legal__toc-list { flex-direction: row; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
    .legal__toc-link { border-bottom: none; border: 1px solid var(--border); padding: .4rem .8rem; }
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — aide aux devoirs
══════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .devoirs-header { grid-template-columns: 1fr; min-height: auto; }
    .devoirs-header__right { height: 340px; }
    .devoirs-header__metas { display: none; }
    .devoirs-header__left { padding: 3rem 2rem 0; }

    .ad-intro__header  { grid-template-columns: 1fr; gap: 1.5rem; }
    .reason { grid-template-columns: 72px 1fr; gap: 1.5rem; }
    .reason__n { font-size: 3rem; }

    .split { grid-template-columns: 1fr; }
    .split__side--before { min-height: 320px; }

    .pullquote__inner { grid-template-columns: 1fr; gap: 2rem; }
    .pullquote__source { border-bottom: none; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.1); }

    .formats__hd { grid-template-columns: 1fr; gap: 1.5rem; }
    .plan--featured { margin: 0 -1.5rem; padding: 2.5rem 1.5rem; }
    .plan::before { left: -1.5rem; }

    .logistics { background: var(--off); }
    .logistics__grid { grid-template-columns: 1fr; gap: 3.5rem; }

    .ad-faq__grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .ad-faq__aside { position: static; }
}

@media (max-width: 575px) {
    .devoirs-header__bottom { flex-wrap: wrap; }
    .devoirs-header__stat { flex: 0 0 50%; border-bottom: 1px solid rgba(255,255,255,.07); }
    .devoirs-header__actions { flex-direction: column; }
    .plan { grid-template-columns: 1fr; }
    .plan__right { text-align: left; margin-top: 1.5rem; }
    .plan--featured { margin: 0 -1rem; padding: 2.25rem 1rem; }
    .plan__price { font-size: 2.8rem; }
    .split__side { padding: 3rem 1.5rem; }
}