/* Polices servies par ce domaine. Aucune n'est employee ailleurs dans
   le reseau : ni les grotesques de wisewand, ni le serif d'isolation. */
@font-face{font-family:'Chivo';font-style:normal;font-weight:600 900;font-display:swap;src:url('/assets/polices/chivo.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/assets/polices/hanken-grotesk.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Polices servies par ce domaine. Plus aucune connexion a Google Fonts,
   donc rien a declarer ni a faire consentir pour les afficher. */
:root{--purple:#1B5245;--purple-dark:#113931;--ink:#1A2420;--muted:#5B665F;--paper:#F8F7F1;--mint:#DCEFE4;--line:#DFE4DF;--white:#fff;--radius:22px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.7 'Hanken Grotesk',sans-serif;padding-bottom:98px}h1,h2,h3,.brand{font-family:'Chivo',sans-serif}h1,h2,h3{line-height:1.18;letter-spacing:-.045em}h1{font-size:clamp(36px,5vw,64px);font-weight:800;margin:20px 0 24px}h2{font-size:clamp(28px,3.2vw,40px);margin:12px 0 20px}h3{font-size:22px;margin:16px 0 12px;letter-spacing:-.025em}p{margin:0 0 18px}a{color:var(--purple);text-decoration:none}a:hover{text-decoration:underline}button,input,select{font:inherit}button,a,input,select{outline-offset:5px}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--purple)}svg{flex-shrink:0}.container{width:min(1184px,calc(100% - 48px));margin-inline:auto}.top-note{background:#E6EFE9;color:#2E4A40;text-align:center;font-size:12px;padding:9px 16px}.top-note a{margin-left:14px;font-weight:700}.bandeau-haut{background:rgba(250,249,246,.96);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;backdrop-filter:blur(14px)}.bandeau-nav{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:91px}.brand{display:flex;gap:11px;align-items:center;color:var(--ink);font-weight:800;font-size:23px;letter-spacing:-1px;line-height:1.3}.brand:hover{text-decoration:none}.brand-light{font-weight:500;color:var(--muted)}.brand small{font:9px/1.5 'Hanken Grotesk',sans-serif;letter-spacing:2px;display:block;margin-top:3px;color:var(--muted)}.brand-mark{width:43px;height:43px;background:var(--purple);color:#fff;border-radius:13px;display:grid;place-items:center;position:relative;font-size:38px;line-height:1;font-weight:800;padding-bottom:7px}.brand-mark span{width:10px;height:10px;background:#b7edcd;position:absolute;right:6px;top:5px;border:2px solid var(--purple);border-radius:50%}.main-nav{display:flex;gap:25px}.main-nav a{font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}.main-nav a:hover,.main-nav a[aria-current]{color:var(--purple)}.button{display:inline-flex;align-items:center;justify-content:center;gap:16px;padding:14px 22px;background:var(--purple);color:#fff;border-radius:9px;font-weight:700;font-size:14px;border:1px solid transparent;transition:background .2s,transform .2s;text-decoration:none;min-height:49px}.button:hover{background:var(--purple-dark);transform:translateY(-2px);text-decoration:none}.button.secondary{background:transparent;border-color:#D2DED6;color:var(--ink)}.button.secondary:hover{background:white}.nav-cta{font-size:12px;padding:11px 16px;min-height:43px}.bascule-menu{display:none;border:0;background:transparent;padding:10px;color:var(--ink)}.aller-contenu{position:absolute;top:-80px;left:20px;background:#fff;padding:12px;z-index:100}.aller-contenu:focus{top:10px}.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;padding:72px 0 68px}.intitule{display:inline-flex;align-items:center;gap:8px;color:var(--purple);font-size:11px;letter-spacing:1.6px;font-weight:800;text-transform:uppercase}.eyebrow-pill{background:#E8F0EB;padding:7px 12px;border:1px solid #D7E2DA;border-radius:40px}.eyebrow-pill:before{content:'';background:var(--purple);width:6px;height:6px;border-radius:50%}.hero h1,.hero .titre-une{font-size:clamp(40px,4.7vw,61px);max-width:620px}.accent{color:var(--purple)}.hero .lede{font-size:17px;max-width:475px}.lede{font-size:19px;line-height:1.7;color:var(--muted)}.une-boutons{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 17px}.micro{font-size:11px;color:var(--muted)}.hero-checks{display:flex;gap:20px;margin-top:24px;font-size:12px;color:var(--muted)}.hero-checks span{display:flex;align-items:center;gap:6px}.hero-checks svg{width:16px;color:#418566}.une-visuel{position:relative;background:radial-gradient(ellipse at 50% 40%,#D8E8DE,transparent 66%),#ECF2EE;border-radius:30px;padding:48px 25px 42px;min-height:430px}.fenetre-demo{background:#fff;border:1px solid #DCE5DF;border-radius:13px;box-shadow:0 22px 60px rgba(26,46,40,.13);transform:rotate(-2deg);overflow:hidden}.app-top{padding:15px 18px;border-bottom:1px solid #E4EBE6;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700}.app-dots{display:flex;gap:4px}.app-dots i{width:5px;height:5px;background:#CBD6CF;border-radius:50%}.app-content{display:flex;min-height:254px}.app-sidebar{width:57px;background:#F7FAF8;border-right:1px solid #E4EBE6;padding:23px 17px;display:flex;flex-direction:column;gap:22px;color:#93A69B}.app-sidebar svg{width:17px}.app-main{padding:22px;flex:1}.app-main strong{font-size:17px;letter-spacing:-.4px}.app-caption{font-size:10px;color:#86968C;margin:3px 0 16px}.app-row{display:flex;justify-content:space-between;align-items:center;margin:9px 0;padding:10px;border:1px solid #E4EBE6;border-radius:6px;font-size:10px}.app-row span{background:#e7f5ee;color:#387258;font-size:8px;padding:3px 5px;border-radius:4px}.app-line{height:6px;background:#E9F1EC;border-radius:3px;margin:9px 0;width:90%}.app-line.short{width:60%}.app-button{background:var(--purple);color:white;text-align:center;padding:8px;font-size:10px;border-radius:5px;margin-top:15px}.pastille{position:absolute;background:white;border:1px solid #DCE5DF;border-radius:12px;padding:15px 18px;box-shadow:0 10px 28px rgba(26,46,40,.07);display:flex;gap:10px;align-items:center;font-size:12px;z-index:2}.pastille svg{color:var(--purple);background:#E6EFE9;border-radius:8px;padding:6px;width:34px;height:34px}.pastille strong{display:block;font-size:12px}.pastille small{display:block;color:var(--muted);font-size:10px}.pastille-haut{top:23px;right:-16px}.pastille-bas{bottom:31px;left:-20px}.visuel-legende{position:absolute;bottom:9px;left:0;right:0;text-align:center;font-size:9px;color:#7A8A80}.trust-strip{border-block:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding:22px 0;gap:24px}.trust-item{display:flex;align-items:center;gap:12px;font-size:12px}.trust-item svg{color:var(--purple)}.trust-item strong{display:block;font-size:13px}.trust-item small{color:var(--muted);font-size:11px}.section{padding:70px 0}.titre-bloc{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:28px}.titre-bloc h2{margin-bottom:0}.titre-bloc p{max-width:390px;color:var(--muted);font-size:14px;margin:0}.grid{display:grid;gap:20px}.three{grid-template-columns:repeat(3,1fr)}.two{grid-template-columns:repeat(2,1fr)}.card{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:29px}.card p{font-size:14px;color:var(--muted)}.fiche-pictogramme{display:inline-flex;align-items:center;justify-content:center;background:#E6EFE9;color:var(--purple);width:42px;height:42px;border-radius:12px}.fiche-lien{color:var(--ink);display:flex;flex-direction:column;transition:transform .2s,border-color .2s}.fiche-lien:hover{text-decoration:none;transform:translateY(-5px);border-color:#9EC3AE}.fiche-lien p{flex:1}.lien-suite{color:var(--purple);font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:10px}.lien-suite svg{width:16px}.verdict{background:#E8F0EB;border:1px solid #D7E2DA;display:grid;grid-template-columns:1fr 1.15fr;border-radius:var(--radius);overflow:hidden}.verdict-intro{padding:38px}.verdict-intro p{color:var(--muted);font-size:15px}.verdict-intro h2{font-size:34px}.verdict-points{background:#fff;padding:34px;display:grid;gap:22px}.verdict-point{display:flex;gap:13px}.verdict-point svg{color:#43836a;background:var(--mint);padding:5px;width:30px;height:30px;border-radius:9px}.verdict-point h3{font-size:16px;margin:0 0 6px}.verdict-point p{font-size:13px;color:var(--muted);margin:0}.label{display:inline-block;font-size:10px;font-weight:700;padding:4px 9px;background:#E8F0EB;border-radius:5px;color:var(--purple)}.feature-band{background:#1A2E28;border-radius:26px;padding:44px;color:white;display:grid;grid-template-columns:1fr 1fr;gap:44px}.feature-band .intitule{color:#A8CDBB}.feature-band h2{font-size:36px}.feature-band p{color:#BBCBC3;font-size:15px}.feature-band .button{background:#BCE0CC;color:#10302A}.releve{padding:0;list-style:none;display:grid;gap:15px}.releve li{display:flex;gap:11px;font-size:14px}.releve svg{color:#a9d8bd;width:19px}.tableau-glisse{overflow-x:auto;border:1px solid var(--line);border-radius:15px;background:#fff}table{border-collapse:collapse;width:100%;text-align:left;font-size:14px;min-width:600px}th,td{padding:17px 20px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;background:#EEF4F0;color:#2E4A40}tr:last-child td{border-bottom:0}.price{font-size:37px;font-weight:800;letter-spacing:-2px}.price small{font-size:13px;font-weight:400;letter-spacing:0}.fiche-tarif{position:relative}.fiche-tarif.featured{border-color:var(--purple);box-shadow:0 10px 30px rgba(27,82,69,.04)}.fiche-tarif ul{padding-left:18px;font-size:13px;color:var(--muted)}.fiche-tarif .label{margin-bottom:16px}.simulateur{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center;background:#ECF3EE;border:1px solid #D7E2DA;border-radius:var(--radius);padding:35px}.simulateur h3{font-size:26px;margin-top:0}.calc-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.field label{display:block;font-size:12px;font-weight:700;margin-bottom:8px}.field input,.field select{width:100%;padding:12px;background:white;border:1px solid #C7D6CB;border-radius:8px;min-width:0}.calc-result{margin-top:16px;display:flex;align-items:baseline;gap:12px}.calc-result strong{font-size:30px;color:var(--purple)}.calc-result span{font-size:12px;color:var(--muted)}.faq details{border-bottom:1px solid var(--line);padding:19px 0}.faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;position:relative;padding-right:30px}.faq summary:after{content:'+';position:absolute;right:5px;color:var(--purple);font-size:23px;font-weight:400}.faq details[open] summary:after{content:'−'}.faq p{font-size:14px;color:var(--muted);padding-top:15px;margin-bottom:0;max-width:850px}.appel-final{text-align:center;background:var(--mint);border-radius:26px;padding:48px 24px}.appel-final h2{max-width:650px;margin:12px auto 20px}.appel-final p{color:#516c60;max-width:590px;margin-inline:auto}.appel-final small{display:block;margin-top:12px;font-size:11px;color:#516c60}.bandeau-pied{background:#f0efe9;border-top:1px solid #e6e3db;padding:55px 0 24px}.pied-blocs{display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr;gap:40px}.pied-blocs h3{font-size:12px;letter-spacing:0;margin:5px 0 20px}.pied-blocs a:not(.brand){display:block;font-size:12px;color:var(--muted);margin-bottom:10px}.pied-blocs p{margin:18px 0;color:var(--muted);font-size:14px}.pied-blocs .footer-disclosure{font-size:11px;max-width:310px}.pied-mentions{border-top:1px solid #dedbd3;padding-top:22px;margin-top:30px;display:flex;justify-content:space-between;gap:20px;font-size:10px;color:var(--muted)}.barre-collee{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.98);backdrop-filter:blur(12px);z-index:50;box-shadow:0 -5px 24px rgba(26,36,32,.04);border-top:1px solid var(--line);padding:14px max(24px,calc((100vw - 1184px)/2));display:flex;justify-content:space-between;align-items:center;gap:20px}.barre-collee>div{display:flex;align-items:center;gap:13px}.barre-collee p{margin:0;line-height:1.5;font-size:13px}.barre-collee small{display:block;font-size:10px;color:var(--muted)}.barre-point{width:9px;height:9px;border-radius:50%;background:#69aa8a;box-shadow:0 0 0 5px #e9f5ee}.fil-ariane{display:flex;gap:10px;font-size:11px;color:var(--muted);padding-top:28px}.essai-entete{max-width:840px;padding:36px 0 40px}.essai-entete h1{font-size:clamp(36px,4.5vw,54px)}.byline{display:flex;align-items:center;gap:11px;font-size:12px;margin-top:22px;line-height:1.5}.byline small{font-size:10px;color:var(--muted)}.avatar{background:#DCEAE1;border:1px solid #C9DACE;color:var(--purple);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800}.essai-colonnes{display:grid;grid-template-columns:minmax(0,800px) 280px;gap:64px;align-items:start}.essai-corps{min-width:0}.notice{background:#EDF3EF;border:1px solid #D7E2DA;border-radius:12px;padding:20px;display:flex;gap:13px;margin-bottom:38px}.notice svg{color:var(--purple);margin-top:4px}.notice p{font-size:12px;margin:0;color:var(--muted)}.essai-partie{padding:0 0 35px;margin-bottom:28px;border-bottom:1px solid var(--line)}.partie-numero{font-size:11px;font-weight:800;color:var(--purple);letter-spacing:1px}.essai-partie h2{font-size:29px;letter-spacing:-.035em}.essai-partie h3{font-size:20px}.essai-partie p,.essai-partie li{color:#4A5550;font-size:16px}.essai-partie li{margin:8px 0}.essai-partie strong{color:var(--ink)}.essai-partie ul,.essai-partie ol{padding-left:23px}.essai-partie .tableau-glisse{margin:22px 0}.essai-partie blockquote{margin:24px 0;padding:20px 25px;background:var(--mint);border-left:3px solid #63a386;border-radius:0 10px 10px 0;font-size:16px}.essai-marge{position:sticky;top:119px}.marge-encart{padding:24px;border:1px solid var(--line);background:white;border-radius:15px}.marge-encart nav{display:grid;gap:14px;margin-top:20px}.marge-encart nav a{font-size:12px;color:var(--muted);line-height:1.45}.marge-encart hr{border:0;border-top:1px solid var(--line);margin:22px 0}.marge-encart p{font-size:12px;color:var(--muted)}.marge-encart .button{width:100%;font-size:12px}.essai-appel{background:#E8F0EB;padding:32px;border-radius:var(--radius)}.essai-appel h2{font-size:29px}.essai-appel p{font-size:14px;color:var(--muted)}.essai-appel small{display:block;font-size:10px;color:var(--muted);margin-top:12px}.reveal-ready{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease}.reveal-ready.revealed{opacity:1;transform:none}.legal-content{max-width:800px;padding:40px 0 80px}.legal-content h1{font-size:42px}.legal-content h2{font-size:25px;margin-top:30px}.legal-content p,.legal-content li{color:var(--muted)}@media(min-width:1400px){.hero{padding-top:90px;padding-bottom:85px}}@media(max-width:1080px){.main-nav{gap:15px}.nav-cta{display:none}.hero{gap:30px}.une-visuel{padding-inline:15px}.essai-colonnes{gap:32px;grid-template-columns:minmax(0,1fr) 240px}.pied-blocs{gap:25px}}@media(max-width:767px){body{padding-bottom:94px}.container{width:calc(100% - 36px)}.top-note{font-size:10px}.top-note a{display:none}.bandeau-nav{min-height:74px}.brand{font-size:21px}.brand-mark{width:38px;height:38px;font-size:34px}.bascule-menu{display:block}.main-nav{display:none;position:absolute;top:74px;left:0;right:0;background:var(--paper);padding:22px;border-bottom:1px solid var(--line);box-shadow:0 14px 20px rgba(26,36,32,.04)}.main-nav.open{display:grid;gap:20px}.main-nav a{font-size:15px}.hero{grid-template-columns:1fr;padding:38px 0 35px;gap:38px}.hero h1{font-size:42px;max-width:560px}.hero .lede{font-size:16px}.une-visuel{min-height:370px;margin-inline:9px;padding-top:40px}.pastille-haut{right:-10px;top:17px}.pastille-bas{left:-10px;bottom:30px}.app-content{min-height:235px}.app-main{padding:20px}.hero-checks{gap:15px}.trust-strip{gap:14px;padding:18px 0;grid-template-columns:1fr}.trust-item{gap:12px}.trust-item strong{display:inline;margin-right:8px}.trust-item small{font-size:10px}.section{padding:44px 0}.titre-bloc{display:block}.titre-bloc p{margin-top:17px}.three,.two{grid-template-columns:1fr}.card{padding:25px}.verdict{grid-template-columns:1fr}.verdict-intro,.verdict-points{padding:27px}.feature-band{grid-template-columns:1fr;padding:29px;gap:10px}.feature-band h2{font-size:30px}.simulateur{grid-template-columns:1fr;padding:26px;gap:15px}.pied-blocs{grid-template-columns:1fr 1fr;gap:25px}.pied-blocs>div:first-child{grid-column:1/-1}.pied-blocs .footer-disclosure{max-width:none}.pied-mentions{display:block}.pied-mentions span{display:block;margin-bottom:8px}.barre-collee{padding:11px 16px;gap:10px}.barre-collee p strong{font-size:11px;display:block;max-width:170px;line-height:1.4}.barre-collee small{font-size:9px;max-width:165px}.barre-point{display:none}.barre-collee .button{padding:11px 13px;font-size:12px;gap:7px;white-space:nowrap}.barre-collee .button svg{width:16px}.essai-entete{padding:29px 0}.essai-entete h1{font-size:36px}.essai-entete .lede{font-size:17px}.essai-colonnes{grid-template-columns:1fr;gap:0}.essai-marge{display:none}.essai-partie h2{font-size:27px}.essai-partie p,.essai-partie li{font-size:15px}.essai-appel{padding:27px}.legal-content h1{font-size:34px}.appel-final{padding:35px 23px}.une-boutons .button{padding-inline:17px;font-size:12px}.notice{padding:16px}.faq summary{font-size:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}.reveal-ready{opacity:1;transform:none}}
/* =======================================================================
   LETTRES ROULANTES
   Au survol, chaque lettre monte d'exactement une hauteur de ligne et
   laisse place a sa copie. La copie n'est pas un doublon dans le HTML :
   c'est une « text-shadow » decalee vers le bas. C'est ce qui rend
   l'effet gratuit en balisage et impossible a desynchroniser.

   Les trois valeurs doivent rester accordees : le line-height du
   conteneur, le decalage de l'ombre et la distance de deplacement. Si
   l'une bouge, la lettre ne retombe plus au bon endroit.
   ======================================================================= */
.roule{display:inline-flex;overflow:hidden;vertical-align:top;line-height:1.25}
.roule-mot{display:inline-flex}
.roule-lettre{display:inline-block;white-space:pre;
  text-shadow:0 1.25em;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 16ms)}
.groupe:hover .roule-lettre,
.groupe:focus-visible .roule-lettre{transform:translateY(-1.25em)}

/* Sans survol possible — tactile — l'effet n'a pas lieu d'etre, et l'ombre
   doit disparaitre sous peine d'apparaitre comme un defaut d'affichage. */
@media(hover:none){
  .roule-lettre{text-shadow:none;transition:none}
}
@media(prefers-reduced-motion:reduce){
  .roule-lettre{transition:none;text-shadow:none}
  .groupe:hover .roule-lettre,
  .groupe:focus-visible .roule-lettre{transform:none}
}

/* Le mot entier, destine aux lecteurs d'ecran : sans cette regle il
   s'affiche en double a cote de la version decoupee. */
.hors-ecran{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0}

/* =======================================================================
   L'OUVERTURE
   Une seule idee, tout l'ecran. C'est la difference entre une page qui
   respire et une fiche qui empile : pas de sur-titre, pas d'encadre, pas
   de grille a trois colonnes. Une phrase, et ce qu'il faut pour la situer.

   La travee est volontairement plus etroite que la fenetre et decalee a
   gauche : une composition centree sur toute la largeur n'a pas de tension.
   ======================================================================= */
.travee{width:min(1240px,100% - 9vw);margin-inline:auto}

.ouverture{min-height:min(88vh,860px);display:flex;flex-direction:column;
  justify-content:center;padding:40px 0 56px}
.ouverture>.travee{display:flex;flex-direction:column;gap:clamp(36px,6vh,76px)}

/* Le bandeau de situation : trois reperes courts, le plus petit corps de
   la page, pose sur un filet. Il donne le contexte sans rien expliquer. */
.bandeau-fin{display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:8px 24px;margin:0;padding-bottom:14px;
  border-bottom:1px solid rgba(26,36,32,.16);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.bandeau-fin span:nth-child(2){color:var(--ink);font-weight:600}

/* La phrase. Elle n'est pas un titre d'accroche : c'est la conclusion de
   l'avis, posee avant l'argumentaire. Un didone supporte ce corps-la sans
   paraitre lourd, a condition de ne pas trop resserrer. */
.ouverture-phrase{font-family:'Chivo',sans-serif;font-weight:700;
  font-size:clamp(40px,7.1vw,100px);line-height:1.18;letter-spacing:-.035em;
  margin:0;max-width:15ch;color:var(--ink)}

/* Le bas : la nuance et l'action, sur une seule ligne. Deux colonnes de
   largeurs tres inegales — l'egalite ferait retomber la page a plat. */
.ouverture-bas{display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:end;gap:28px 48px;
  padding-top:26px;border-top:1px solid rgba(26,36,32,.16)}
.ouverture-bas p{margin:0;max-width:52ch;font-size:17px;line-height:1.62;
  color:#45504A}
.ouverture-bas .button{flex-shrink:0}

@media(max-width:860px){
  .travee{width:min(1240px,100% - 36px)}
  .ouverture{min-height:0;padding:26px 0 40px}
  .ouverture-phrase{max-width:none}
  .ouverture-bas{grid-template-columns:1fr;align-items:start;gap:22px}
  .ouverture-bas p{font-size:16px}
  .bandeau-fin{font-size:10.5px;letter-spacing:.12em}
  .bandeau-fin span:nth-child(2){order:3;flex-basis:100%}
}

/* La barre d'appel collante n'a pas lieu d'etre sur l'ouverture : elle y
   double le bouton deja present et encombre la seule chose qu'on veut
   faire lire. Elle n'apparait qu'une fois l'ouverture passee. */
.barre-collee{transform:translateY(110%);transition:transform .35s cubic-bezier(.16,.84,.26,1)}
body.ouverture-passee .barre-collee{transform:none}
@media(prefers-reduced-motion:reduce){.barre-collee{transition:none}}

/* Le titre reprend le mecanisme des lettres roulantes, ligne par ligne :
   survoler une ligne la fait basculer sur sa copie, avec un decalage par
   lettre. A ce corps-la, l'ombre doit etre calee au pixel — d'ou le
   line-height commun a .roule et a la ligne. */
.ouverture-phrase .ligne{display:block;cursor:default}
.ouverture-phrase .roule{line-height:1.18;overflow:hidden}
.ouverture-phrase .roule-lettre{text-shadow:0 1.18em;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 22ms)}
.ouverture-phrase .groupe:hover .roule-lettre,
.ouverture-phrase .groupe:focus-visible .roule-lettre{transform:translateY(-1.18em)}
/* La troisieme ligne porte l'accent : sa copie l'est aussi, sinon la
   bascule ferait changer la couleur a mi-course. */
.ouverture-phrase .appuye .roule-lettre{color:var(--purple)}
@media(hover:none){.ouverture-phrase .roule-lettre{text-shadow:none}}
@media(prefers-reduced-motion:reduce){
  .ouverture-phrase .roule-lettre{text-shadow:none;transition:none}
  .ouverture-phrase .groupe:hover .roule-lettre{transform:none}
}