@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('/polices/BricolageGrotesque.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;src:url('/polices/Inter.woff2') format('woff2')}

/* ==========================================================================
   Feuille de style — couleur franche, aplats, angles ronds.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#fff;color:#17190f;font-family:"Inter", -apple-system, 'Segoe UI', sans-serif;
     font-size:18px;line-height:1.62;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:"Bricolage Grotesque", Georgia, serif;margin:0;
            font-weight:800;letter-spacing:-.032em;
            line-height:1.06}
h1{font-size:clamp(2.6rem,5.6vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.1}
h3{font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.25;
   letter-spacing:-.012em}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em;padding-left:1.2em}
li{margin:.35em 0}
strong{font-weight:650}

/* --- trames -------------------------------------------------------------- */
.o_conteneur{width:min(1220px,calc(100% - 44px));margin-inline:auto}
.o_conteneur--etroit{width:min(740px,calc(100% - 44px));margin-inline:auto}
.o_section{padding:102px 0}
.o_section--serree{padding:67px 0 14px}
.o_sourdine{opacity:.72}
.o_chapo{font-size:clamp(1.08rem,1.5vw,1.32rem);opacity:.78;max-width:56ch;
         margin:14px 0 0;line-height:1.5}

/* Les fonds : c'est l'alternance qui donne le rythme. */
.o_section--voile{background:#f7f3ee}
.o_section--marque{background:#b81f26;color:#ffffff}
.o_section--marque h2,.o_section--marque h3{color:#ffffff}
.o_section--chaude{background:#4fa845;color:#17190f}
.o_section--chaude h2,.o_section--chaude h3{color:#17190f}

.o_surtitre{font-size:.74rem;font-weight:750;letter-spacing:.16em;
            text-transform:uppercase;margin:0 0 14px;
            font-family:"Inter", -apple-system, 'Segoe UI', sans-serif;color:#b81f26}
.o_section--marque .o_surtitre{color:#4fa845}
.o_section--chaude .o_surtitre{opacity:.7}

/* --- boutons : pilule, contrastés --------------------------------------- */
.o_bouton{display:inline-flex;align-items:center;gap:.5em;padding:1em 1.8em;
          border-radius:999px;text-decoration:none;font-weight:650;
          font-size:.97rem;cursor:pointer;border:2px solid transparent;
          font-family:"Inter", -apple-system, 'Segoe UI', sans-serif;line-height:1;
          transition:transform .16s ease,background-color .16s ease,
                     color .16s ease,border-color .16s ease}
.o_bouton--plein{background:#4fa845;color:#17190f}
.o_bouton--plein:hover{transform:translateY(-2px)}
.o_bouton--ligne{border-color:currentColor;background:transparent}
.o_bouton--ligne:hover{background:currentColor}
.o_bouton--ligne:hover{color:#fff}
.o_section--marque .o_bouton--ligne:hover{color:#b81f26}
.o_boutons{display:flex;flex-wrap:wrap;gap:12px;margin-top:25px}

/* --- en-tête ------------------------------------------------------------- */
.o_entete{position:sticky;top:0;z-index:40;background:#b81f26;
          color:#ffffff}
.o_entete__inner{display:flex;align-items:center;gap:25px;min-height:74px}
.o_marque{display:inline-flex;align-items:center;gap:.5em;
          text-decoration:none;font-family:"Bricolage Grotesque", Georgia, serif;
          font-weight:800;font-size:1.2rem;
          letter-spacing:-.032em;white-space:nowrap}
.o_marque__point{width:.62em;height:.62em;border-radius:50%;
                 background:#4fa845;display:inline-block}
.o_nav{display:flex;gap:25px;margin-left:auto;align-items:center}
.o_nav a{text-decoration:none;font-size:.94rem;font-weight:540;
         white-space:nowrap;opacity:.86}
.o_nav a:hover,.o_nav a[aria-current]{opacity:1}
.o_burger{display:none;margin-left:auto;background:none;border:0;padding:8px;
          cursor:pointer}
.o_burger span{display:block;width:24px;height:2px;background:currentColor;
               margin:5px 0}

/* --- bannière : aplat de marque, carte photo posée dessus ---------------- */
.o_banniere{background:#b81f26;color:#ffffff;
            padding:102px 0 102px;position:relative;overflow:hidden}
.o_banniere::after{content:"";position:absolute;right:-8%;top:-30%;
                   width:52%;aspect-ratio:1;border-radius:50%;
                   background:rgba(255,255,255,.06)}
.o_banniere__grille{display:grid;grid-template-columns:1.08fr .92fr;
                    gap:67px;align-items:center;position:relative;z-index:1}
.o_banniere__grille--seule{grid-template-columns:minmax(0,1fr);max-width:60rem}
.o_banniere__texte h1{margin-bottom:25px;max-width:17ch}
.o_banniere__media img{width:100%;aspect-ratio:4/3;object-fit:cover;
                       border-radius:14px;
                       box-shadow:0 24px 60px -24px rgba(0,0,0,.45)}

.o_preuve{display:grid;
          grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
          gap:25px;margin-top:67px;position:relative;z-index:1}
.o_preuve div{border-top:3px solid #4fa845;padding-top:14px}
.o_preuve b{display:block;font-family:"Bricolage Grotesque", Georgia, serif;
            font-size:clamp(1.8rem,2.4vw,2.4rem);
            font-weight:800;letter-spacing:-.032em;
            line-height:1;color:#4fa845}
.o_preuve span{font-size:.84rem;opacity:.8;display:block;margin-top:.5em}

/* --- cartes blanches posées sur la couleur ------------------------------ */
.o_grille{display:grid;gap:25px}
.o_grille--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.o_grille--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.o_grille--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.o_carte{background:#fff;color:#17190f;border-radius:14px;
         padding:25px;box-shadow:0 2px 0 rgba(0,0,0,.04)}
.o_section--voile .o_carte{box-shadow:0 8px 30px -18px rgba(0,0,0,.28)}
.o_carte h3{margin:.4em 0 .5em}
.o_carte p{margin:0;opacity:.75;font-size:.98rem}
.o_carte__num{font-family:"Bricolage Grotesque", Georgia, serif;font-size:2.1rem;line-height:1;
              font-weight:800;color:#4fa845;display:block;
              letter-spacing:-.032em}

/* --- fonctions : deux colonnes, pastille colorée ------------------------- */
.o_fonctions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
             gap:39px 67px}
.o_fonction{padding-left:25px;border-left:4px solid #4fa845}
.o_fonction h3{margin-bottom:.45em}
.o_fonction p{margin:0;opacity:.75;font-size:.97rem}
.o_section--marque .o_fonction{border-left-color:#4fa845}

/* --- duo texte / image --------------------------------------------------- */
.o_duo{display:grid;grid-template-columns:1fr 1fr;gap:67px;
       align-items:center}
.o_duo--inverse .o_duo__media{order:2}
.o_duo__media img{border-radius:14px;aspect-ratio:4/3;object-fit:cover;
                  width:100%;box-shadow:0 24px 60px -30px rgba(0,0,0,.4)}
.o_duo__texte h3{font-size:clamp(1.6rem,2.8vw,2.3rem);margin-bottom:14px}

/* --- tableau ------------------------------------------------------------- */
.o_tableau{width:100%;border-collapse:collapse;font-size:.95rem;
           background:#fff;border-radius:7px;overflow:hidden}
.o_tableau th,.o_tableau td{text-align:left;padding:1em 1.2em}
.o_tableau th{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;
              font-weight:750;background:#b81f26;color:#ffffff}
.o_tableau tbody tr:nth-child(even){background:#f7f3ee}
.o_defile{overflow-x:auto}

/* --- offres -------------------------------------------------------------- */
.o_offres{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
          gap:25px;align-items:start}
.o_offre{background:#fff;color:#17190f;border-radius:14px;
         padding:39px 25px;box-shadow:0 8px 30px -20px rgba(0,0,0,.3)}
.o_offre--phare{background:#b81f26;color:#ffffff;
                transform:translateY(-10px);
                box-shadow:0 30px 60px -28px rgba(0,0,0,.45)}
.o_offre--phare h3{color:#ffffff}
.o_offre__etiquette{display:inline-block;font-size:.68rem;font-weight:750;
                    letter-spacing:.14em;text-transform:uppercase;
                    background:#4fa845;color:#17190f;
                    padding:.35em .9em;border-radius:999px;
                    margin-bottom:14px}
.o_offre__prix{font-family:"Bricolage Grotesque", Georgia, serif;
               font-size:clamp(2.3rem,3.2vw,3.1rem);
               font-weight:800;letter-spacing:-.032em;
               margin:.2em 0 0;line-height:1}
.o_offre__prix small{font-size:.85rem;font-weight:400;opacity:.7;
                     letter-spacing:0;font-family:"Inter", -apple-system, 'Segoe UI', sans-serif}
.o_offre ul{list-style:none;padding:0;margin:25px 0}
.o_offre li{padding-left:1.7em;position:relative;font-size:.95rem;
            margin:.65em 0;opacity:.85}
.o_offre li::before{content:"";position:absolute;left:0;top:.42em;
                    width:1.05em;height:.5em;border-left:2.5px solid #4fa845;
                    border-bottom:2.5px solid #4fa845;
                    transform:rotate(-45deg)}


/* --- tuiles de sommaire : la seule présentation des modules ------------- */
.o_tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
          gap:25px}
.o_tuile{display:block;background:#fff;color:#17190f;text-decoration:none;
         border-radius:14px;padding:25px;
         border:2px solid rgba(0,0,0,.07);
         transition:border-color .18s ease,transform .18s ease}
.o_tuile:hover{border-color:#4fa845;transform:translateY(-3px)}
.o_tuile__num{font-family:"Bricolage Grotesque", Georgia, serif;font-size:1.5rem;font-weight:800;
              color:#4fa845;letter-spacing:-.032em;display:block;
              margin-bottom:7px}
.o_tuile h3{margin:0 0 .45em}
.o_tuile p{margin:0 0 1em;opacity:.72;font-size:.96rem}
.o_tuile__lien{font-size:.86rem;font-weight:700;color:#b81f26;
               letter-spacing:.02em}
.o_tuile__lien::after{content:" 92"}

/* --- image d'illustration ------------------------------------------------ */
.o_image{margin:0}
.o_image img{width:100%;border-radius:14px;object-fit:cover;
             aspect-ratio:4/3;box-shadow:0 24px 60px -34px rgba(0,0,0,.45)}
.o_image figcaption{font-size:.84rem;opacity:.65;margin-top:.8em}

/* --- deux colonnes texte + image sur les pages intérieures -------------- */
.o_avec_image{display:grid;grid-template-columns:1.1fr .9fr;gap:67px;
              align-items:start}
@media (max-width:960px){.o_avec_image{grid-template-columns:1fr}}

/* --- questions ----------------------------------------------------------- */
.o_faq details{background:#fff;border-radius:7px;
               padding:14px 25px;margin-bottom:12px;
               box-shadow:0 2px 0 rgba(0,0,0,.04)}
.o_faq summary{cursor:pointer;font-weight:650;font-size:1.05rem;
               list-style:none;display:flex;justify-content:space-between;
               gap:1.5em;font-family:"Bricolage Grotesque", Georgia, serif;letter-spacing:-.01em}
.o_faq summary::-webkit-details-marker{display:none}
.o_faq summary::after{content:"+";color:#4fa845;font-weight:700;
                      font-size:1.5em;line-height:1}
.o_faq details[open] summary::after{content:"\2013"}
.o_faq p{margin:.8em 0 0;opacity:.75;max-width:70ch}

/* --- appel à l'action ---------------------------------------------------- */
.o_appel{background:#4fa845;color:#17190f;
         padding:clamp(48px,5.5vw,67px) clamp(28px,4.5vw,67px);
         border-radius:14px;position:relative;overflow:hidden}
.o_appel .o_conteneur{width:100%;margin:0}
.o_appel::after{content:"";position:absolute;left:-6%;bottom:-45%;
                width:38%;aspect-ratio:1;border-radius:50%;
                background:rgba(255,255,255,.14)}
.o_appel .o_conteneur{position:relative;z-index:1}
.o_appel h2{max-width:20ch}
.o_appel .o_chapo{opacity:.82}
.o_appel .o_bouton--plein{background:#17190f;color:#fff}
.o_appel .o_bouton--ligne{border-color:currentColor}

/* --- formulaire ---------------------------------------------------------- */
.o_champ{margin-bottom:25px}
.o_champ label{display:block;font-size:.82rem;font-weight:680;
               letter-spacing:.05em;text-transform:uppercase;
               margin-bottom:.5em;opacity:.7}
.o_champ input,.o_champ select,.o_champ textarea{width:100%;
    padding:.95em 1.1em;border:2px solid rgba(0,0,0,.1);
    border-radius:7px;font:inherit;font-size:1rem;
    background:#fff;color:#17190f}
.o_champ input:focus,.o_champ select:focus,.o_champ textarea:focus{
    outline:0;border-color:#b81f26}
.o_champ textarea{min-height:140px;resize:vertical}
.o_consentement{display:flex;gap:.75em;align-items:flex-start;
                font-size:.88rem;opacity:.8;margin-bottom:25px}
.o_consentement input{width:auto;margin-top:.3em;border:0}
.o_consentement label{text-transform:none;letter-spacing:0;font-size:.88rem;
                      font-weight:400;margin:0;opacity:1}

/* --- fil d'ariane -------------------------------------------------------- */
.o_fil{font-size:.82rem;padding:14px 0 0;opacity:.65}
.o_fil a{text-decoration:none}
.o_fil a:hover{text-decoration:underline}

/* --- pied de page -------------------------------------------------------- */
.o_pied{background:#17190f;color:#fff;padding:67px 0 25px;
        margin-top:0;font-size:.93rem}
.o_pied__grille{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
                gap:25px}
.o_pied h4{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;
           opacity:.6;margin-bottom:14px;font-weight:750;
           font-family:"Inter", -apple-system, 'Segoe UI', sans-serif}
.o_pied ul{list-style:none;padding:0;margin:0}
.o_pied li{margin:.5em 0}
.o_pied a{text-decoration:none;opacity:.78}
.o_pied a:hover{opacity:1}
.o_pied .o_marque__point{background:#4fa845}
.o_pied__bas{display:flex;flex-wrap:wrap;gap:14px;
             justify-content:space-between;margin-top:67px;
             padding-top:14px;border-top:1px solid rgba(255,255,255,.15);
             font-size:.82rem;opacity:.6}

/* --- accessibilité ------------------------------------------------------- */
.o_saut{position:absolute;left:-9999px}
.o_saut:focus{left:12px;top:12px;position:fixed;z-index:99;
              background:#4fa845;color:#17190f;padding:.8em 1.2em;
              border-radius:999px}
:focus-visible{outline:3px solid #4fa845;outline-offset:3px}

/* --- écrans étroits ------------------------------------------------------ */
@media (max-width:960px){
  .o_banniere__grille,.o_duo,.o_fonctions{grid-template-columns:1fr}
  .o_duo--inverse .o_duo__media{order:0}
  .o_grille--3,.o_grille--4,
  .o_offres{grid-template-columns:repeat(2,minmax(0,1fr))}
  .o_offre--phare{transform:none}
  .o_pied__grille{grid-template-columns:repeat(2,minmax(0,1fr))}
  .o_nav{display:none}
  .o_nav--ouvert{display:flex;position:absolute;top:74px;left:0;right:0;
                 flex-direction:column;align-items:flex-start;
                 background:#b81f26;padding:25px 22px;gap:14px}
  .o_burger{display:block}
  .o_section{padding:67px 0}
  .o_banniere{padding:67px 0}
  .o_banniere::after{display:none}
}
@media (max-width:620px){
  body{font-size:17px}
  .o_grille--2,.o_grille--3,.o_grille--4,.o_offres,
  .o_pied__grille{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}

/* ==========================================================================
   Grandes images, écrans de logiciel, mouvement.
   ========================================================================== */

/* --- bandeau d'annonce, au-dessus de l'en-tête --------------------------- */
.o_annonce{background:#17190f;color:#fff;font-size:.86rem;
           padding:.62em 0;text-align:center}
.o_annonce a{color:#4fa845;font-weight:650;text-decoration:none;
             border-bottom:1px solid currentColor;padding-bottom:1px}
.o_annonce a:hover{color:#fff}
.o_annonce__puce{display:inline-block;width:7px;height:7px;border-radius:50%;
                 background:#4fa845;margin-right:.6em;vertical-align:middle;
                 animation:o_pulse 2.4s ease-in-out infinite}
@keyframes o_pulse{0%,100%{opacity:1;transform:scale(1)}
                   50%{opacity:.35;transform:scale(.72)}}

/* --- l'écran : une capture présentée comme une fenêtre ------------------- */
.o_ecran{position:relative;border-radius:14px;overflow:hidden;
         background:#0f1115;
         box-shadow:0 40px 90px -34px rgba(0,0,0,.55),
                    0 0 0 1px rgba(0,0,0,.06)}
.o_ecran__barre{display:flex;align-items:center;gap:7px;padding:11px 14px;
                background:#1b1f27}
.o_ecran__barre i{width:11px;height:11px;border-radius:50%;display:block;
                  background:#3a4150}
.o_ecran__barre i:first-child{background:#ff5f57}
.o_ecran__barre i:nth-child(2){background:#febc2e}
.o_ecran__barre i:nth-child(3){background:#28c840}
.o_ecran__barre span{margin-left:auto;font-size:.72rem;color:#7b8496;
                     font-family:"Inter", -apple-system, 'Segoe UI', sans-serif;letter-spacing:.04em}
.o_ecran img{width:100%;display:block;background:#fff}
.o_ecran__attente{aspect-ratio:16/10;display:grid;place-items:center;
                  background:#f7f3ee;color:#17190f;text-align:center;
                  padding:25px;font-size:.9rem;opacity:.75}

/* Le cadre penché : du relief, qui se redresse au survol. */
.o_ecran--incline{transform:perspective(1800px) rotateY(-7deg) rotateX(2deg);
                  transition:transform .8s cubic-bezier(.2,.7,.3,1)}
.o_ecran--incline:hover{transform:perspective(1800px) rotateY(0) rotateX(0)}

/* --- section alternée : un bénéfice, un écran --------------------------- */
.o_alterne{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
           gap:clamp(36px,5vw,67px);align-items:center}
.o_alterne + .o_alterne{margin-top:clamp(56px,7vw,102px)}
.o_alterne--inverse .o_alterne__media{order:-1}

/* L'écran déborde jusqu'au bord de la fenêtre, alternativement à droite
   puis à gauche. C'est ce qui donne une image large sans rétrécir le texte,
   et ce qui rythme la page quand on la fait défiler. */
@media (min-width:1100px){
  .o_alterne__media{--o-debord:max(0px,calc((100vw - 1220px) / 2))}
  .o_alterne:not(.o_alterne--inverse) .o_alterne__media{
      margin-right:calc(0px - var(--o-debord))}
  .o_alterne--inverse .o_alterne__media{
      margin-left:calc(0px - var(--o-debord))}
}
.o_alterne__texte h2{margin-bottom:14px}
.o_alterne__liste{list-style:none;padding:0;margin:25px 0 0}
.o_alterne__liste li{position:relative;padding-left:1.9em;margin:.7em 0;
                     font-size:1rem}
.o_alterne__liste li::before{content:"";position:absolute;left:0;top:.42em;
                             width:1.05em;height:1.05em;border-radius:50%;
                             background:#4fa845}
.o_alterne__liste li::after{content:"";position:absolute;left:.32em;top:.68em;
                            width:.42em;height:.22em;
                            border-left:2px solid #17190f;
                            border-bottom:2px solid #17190f;
                            transform:rotate(-45deg)}
.o_alterne .o_bouton{margin-top:25px}

/* --- visuel pleine largeur ---------------------------------------------- */
.o_section{overflow:clip}
.o_bande{position:relative;overflow:hidden}
.o_bande img{width:100%;aspect-ratio:21/8;object-fit:cover;display:block}
.o_bande__voile{position:absolute;inset:0;
                background:linear-gradient(90deg,rgba(0,0,0,.74) 0%,
                           rgba(0,0,0,.3) 62%,rgba(0,0,0,0) 100%)}
.o_bande__texte{position:absolute;inset:0;display:flex;align-items:center;
                color:#fff}
.o_bande__texte h2{color:#fff;max-width:18ch}
.o_bande__texte p{max-width:46ch;opacity:.92;margin-top:.7em}

/* --- badges de confiance ------------------------------------------------- */
.o_confiance{display:grid;
             grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
             gap:25px}
.o_confiance div{display:flex;gap:.85em;align-items:flex-start}
.o_confiance b{display:block;font-size:.98rem;margin-bottom:.15em}
.o_confiance span{font-size:.87rem;opacity:.72;line-height:1.45;display:block}
.o_coche{flex:0 0 auto;width:1.6em;height:1.6em;border-radius:50%;
         background:#4fa845;position:relative;margin-top:.15em}
.o_coche::after{content:"";position:absolute;left:.48em;top:.44em;
                width:.5em;height:.26em;
                border-left:2px solid #17190f;
                border-bottom:2px solid #17190f;
                transform:rotate(-45deg)}

/* La colonne de texte de la bannière est plus étroite depuis que l'image
   déborde : les quatre preuves doivent y tenir sur une seule ligne. */
@media (min-width:1100px){
  .o_preuve{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .o_preuve b{font-size:clamp(1.5rem,1.9vw,1.95rem)}
}

/* --- chiffres ------------------------------------------------------------ */
.o_chiffres{display:grid;
            grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
            gap:39px;text-align:center}
.o_chiffres b{display:block;font-family:"Bricolage Grotesque", Georgia, serif;
              font-size:clamp(2.6rem,4.6vw,3.9rem);line-height:1;
              font-weight:800;letter-spacing:-.032em;
              color:#4fa845}
.o_chiffres span{display:block;margin-top:.6em;font-size:.92rem;opacity:.78}

/* --- mouvement : apparition à la lecture --------------------------------- */
/* L'état masqué n'est posé que si le script tourne : sans lui, la page
   reste entièrement lisible. */
.js .o_reveal{opacity:0;transform:translateY(26px);
              transition:opacity .75s cubic-bezier(.2,.7,.3,1),
                         transform .75s cubic-bezier(.2,.7,.3,1);
              transition-delay:var(--o-delai,0ms)}
.js .o_reveal.o_vu{opacity:1;transform:none}
.js .o_reveal--gauche{transform:translateX(-34px)}
.js .o_reveal--droite{transform:translateX(34px)}
.js .o_reveal--zoom{transform:scale(.955)}

/* --- mouvement : ce qui réagit au survol --------------------------------- */
.o_carte{transition:transform .4s cubic-bezier(.2,.7,.3,1),
                    box-shadow .4s cubic-bezier(.2,.7,.3,1)}
.o_carte:hover{transform:translateY(-7px);
               box-shadow:0 26px 46px -26px rgba(0,0,0,.4)}
.o_bouton{transition:transform .25s cubic-bezier(.2,.7,.3,1),
                     box-shadow .25s,background-color .25s,color .25s}
.o_bouton--plein:hover{transform:translateY(-2px);
                       box-shadow:0 14px 26px -14px rgba(0,0,0,.5)}
.o_image img,.o_banniere__media img{
    transition:transform .9s cubic-bezier(.2,.7,.3,1)}
.o_image:hover img{transform:scale(1.035)}

/* --- l'image, plus grande partout ---------------------------------------- */
.o_banniere__media img{aspect-ratio:5/4}
@media (min-width:1100px){
  .o_banniere__grille{grid-template-columns:1fr 1.15fr}
  .o_banniere__media{margin-right:max(-40px,calc((100vw - 1220px)/-2))}
}
.o_image img{aspect-ratio:4/3}
.o_image--large img{aspect-ratio:16/10}

@media (max-width:960px){
  .o_alterne{grid-template-columns:1fr}
  .o_alterne--inverse .o_alterne__media{order:0}
  .o_ecran--incline{transform:none}
  .o_bande img{aspect-ratio:4/3}
  .o_bande__voile{background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,
                  rgba(0,0,0,.8) 100%)}
}
@media (max-width:620px){
  .o_annonce{font-size:.78rem}
  .o_chiffres{gap:25px}
}

/* Le mouvement est un confort, jamais une condition d'accès au contenu. */
@media (prefers-reduced-motion:reduce){
  .js .o_reveal{opacity:1;transform:none;transition:none}
  .o_annonce__puce{animation:none}
  .o_ecran--incline{transform:none}
  .o_carte:hover,.o_bouton--plein:hover{transform:none}
}