/* ---------- Poppins, hebergee ici, plus aucun appel a Google ----------
   Trois graisses, jeu latin, version 4.004, 24 Ko au total.
   font-display:swap : le texte s'affiche tout de suite dans la police
   de secours, puis bascule sur Poppins des qu'elle est la. */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/poppins-v24-latin-regular.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/poppins-v24-latin-500.woff2) format('woff2')}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/poppins-v24-latin-600.woff2) format('woff2')}

/* ==========================================================================
   Furano, feuille de style du site.
   Palette et regles issues de la charte du 31 aout 2026.
   Aucune classe a poser a la main : les regles visent les balises et la
   structure. Voir le cahier des charges, chapitres 6 et 6 suite.
   ========================================================================== */

:root{
  --prune:#2B1650;
  --violet:#7A5AF8;
  --jv:#A8F31F;
  --blanc:#FFFFFF;
  --casse:#F7F5FB;
  --gris:#5c5170;
  --trait:#e2dcf0;
  --grad:linear-gradient(100deg,#7BD00F 0%,#8CDB15 22%,#A8F31F 50%,#BEF632 76%,#D2FA4A 100%);
  --e:cubic-bezier(.2,.7,.3,1);
  --r-pill:999px; --r-carte:20px; --r-img:24px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font:400 17px/1.7 Poppins,system-ui,-apple-system,sans-serif;color:var(--prune);
     background:var(--casse);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}

.w{width:min(1240px,100% - 48px);margin-inline:auto}
section{padding:110px 0}
section.serre{padding:78px 0}

/* ---------- titres ---------- */
h1{font-size:clamp(40px,5.4vw,66px);font-weight:600;letter-spacing:-.038em;line-height:1.03}
h2{font-size:clamp(30px,3.6vw,44px);font-weight:600;letter-spacing:-.032em;line-height:1.1}
h3{font-size:22px;font-weight:600;letter-spacing:-.014em;line-height:1.3}
h4{font-size:18px;font-weight:600;letter-spacing:-.01em}
p{max-width:62ch}
.sur{font-size:12px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
     color:var(--violet);margin-bottom:16px}
.tete{max-width:660px;margin-bottom:56px}
.tete p{margin-top:16px;color:var(--gris)}
.gris{color:var(--gris)}

/* ---------- boutons, une seule echelle de rayon ---------- */
.b{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;
   padding:0 30px;border-radius:var(--r-pill);font:600 16px Poppins,sans-serif;
   text-decoration:none;white-space:nowrap;border:0;cursor:pointer;
   transition:transform .22s var(--e),box-shadow .22s var(--e),background .22s var(--e)}
.b1{background:var(--grad);color:var(--prune)}
.b2{background:transparent;box-shadow:inset 0 0 0 1.5px var(--prune);color:var(--prune)}
.b3{background:var(--jv);color:var(--prune)}
.b:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(43,22,80,.15)}
.b2:hover{background:rgba(43,22,80,.05)}
.fl{width:18px;height:2px;background:currentColor;position:relative;flex:none;
    transition:width .22s var(--e)}
.fl::after{content:"";position:absolute;right:0;top:-4px;width:9px;height:9px;
           border-top:2px solid currentColor;border-right:2px solid currentColor;
           transform:rotate(45deg)}
.b:hover .fl{width:28px}

/* ---------- en-tete, deux barres ---------- */
.barre-haut{background:#1d0f37;color:#cfc4e6;font-size:13.5px}
.barre-haut .w{height:42px;display:flex;align-items:center;gap:20px}
.barre-haut .zone{display:flex;gap:14px;flex-wrap:wrap}
.barre-haut .zone b{font-weight:500;color:#fff}
.barre-haut a{margin-left:auto;color:#fff;text-decoration:none;font-weight:600;
              display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.barre-haut a::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--jv)}
.barre-haut a.mail{margin-left:auto;font-weight:500;color:#e6dff5}
.barre-haut a.mail::before{display:none}
.barre-haut a.mail+a{margin-left:20px}
.barre-haut a:hover{text-decoration:underline;text-underline-offset:4px}

header{position:sticky;top:0;z-index:60}
.nav{transition:background .3s var(--e),box-shadow .3s var(--e)}
.nav .w{height:82px;display:flex;align-items:center;gap:36px}
.nav img{height:28px;width:auto;transition:opacity .3s}
.nav .logo-clair{display:none}
.nav nav{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:15.5px;font-weight:500}
.nav nav a{text-decoration:none}
.nav nav a:not(.b){padding:6px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.nav nav a:not(.b):hover{border-bottom-color:var(--jv)}
.nav .b{min-height:48px;padding:0 24px;font-size:15px}
.burger{display:none;margin-left:auto;width:46px;height:46px;border-radius:var(--r-pill);
        background:transparent;box-shadow:inset 0 0 0 1.5px currentColor;
        position:relative;z-index:70;cursor:pointer;color:inherit}
.burger::before,.burger::after,.burger span{content:"";position:absolute;left:13px;width:20px;
        height:1.5px;background:currentColor;transition:transform .3s var(--e),opacity .2s var(--e)}
.burger::before{top:16px}
.burger span{top:22.25px}
.burger::after{top:28.5px}
body.menu-ouvert .burger{color:#fff}
body.menu-ouvert .burger::before{transform:translateY(6.25px) rotate(45deg)}
body.menu-ouvert .burger span{opacity:0}
body.menu-ouvert .burger::after{transform:translateY(-6.25px) rotate(-45deg)}
body.menu-ouvert{overflow:hidden}

/* barre posee sur la photo : elle devient opaque au defilement */
body[data-hero] .nav{position:absolute;left:0;right:0;color:#fff;
  transition:background .28s var(--e),color .28s var(--e),box-shadow .28s var(--e)}
body[data-hero] .nav.pose{position:relative}
body[data-hero] .nav .logo-clair{display:block}
body[data-hero] .nav .logo-sombre{display:none}
body[data-hero] .nav nav a:not(.b){color:#fff}
body[data-hero] .nav .b2{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.6);color:#fff}
body[data-hero] .nav .b2:hover{background:rgba(255,255,255,.12)}
body[data-hero] header{position:sticky;top:0}
body[data-hero] .nav.pose{background:rgba(247,245,251,.94);
  backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--trait);color:var(--prune)}
body[data-hero] .nav.pose .logo-clair{display:none}
body[data-hero] .nav.pose .logo-sombre{display:block}
body[data-hero] .nav.pose nav a:not(.b){color:var(--prune)}
body[data-hero] .nav.pose .b2{box-shadow:inset 0 0 0 1.5px var(--prune);color:var(--prune)}
/* pages interieures : barre pleine des le depart */
body:not([data-hero]) .nav{background:rgba(247,245,251,.94);backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--trait)}

/* ---------- bandeau pleine largeur, texte sur la photo ---------- */
.hero{position:relative;min-height:min(760px,82vh);display:flex;align-items:flex-end;
      padding:190px 0 76px;overflow:hidden;background:var(--prune)}
.shot{position:absolute;inset:0;z-index:0}
.shot img{width:100%;height:100%;object-fit:cover;object-position:60% center}
.shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(27,14,50,.9) 0%,rgba(27,14,50,.72) 34%,
             rgba(27,14,50,.24) 68%,rgba(27,14,50,.42) 100%)}
.hero::before{content:"";position:absolute;top:0;left:0;right:0;height:200px;z-index:0;
  background:linear-gradient(180deg,rgba(20,9,40,.62) 0%,rgba(20,9,40,.28) 55%,rgba(20,9,40,0) 100%)}
.hero .w{position:relative;z-index:1;color:#fff}
.hero h1{max-width:15ch;text-shadow:0 2px 26px rgba(20,9,40,.35)}
.hero p{font-size:19.5px;line-height:1.6;color:#e7e0f5;max-width:33em;margin:24px 0 36px}
.hero .btns{display:flex;gap:14px;flex-wrap:wrap}
.hero .b2{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.65);color:#fff;
          background:rgba(255,255,255,.08);backdrop-filter:blur(6px)}
.hero .b2:hover{background:rgba(255,255,255,.18)}

/* bande de garanties, juste sous le bandeau */
.gar{background:var(--blanc);border-bottom:1px solid var(--trait)}
.gar .w{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.gar div{padding:26px 30px 26px 0;border-right:1px solid var(--trait)}
.gar div:last-child{border-right:0;padding-right:0}
.gar b{display:block;font-size:17px;font-weight:600;letter-spacing:-.012em;margin-bottom:4px}
.gar span{font-size:14.5px;color:var(--gris);line-height:1.5}

/* ---------- constat, pleine largeur ---------- */
.constat{background:var(--blanc);border-block:1px solid var(--trait)}
.constat .w{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:start}
.constat h2{max-width:20ch}
.constat p{font-size:19px;color:var(--gris);max-width:52ch}
.constat .plein{grid-column:1 / -1}

/* ---------- explications, quinconce ---------- */
.quin{display:grid;grid-template-columns:1fr 1fr;gap:26px 40px}
.quin>*:nth-child(even){margin-top:46px}
.expl{background:var(--blanc);border-radius:var(--r-carte);overflow:hidden;
      box-shadow:0 14px 40px rgba(43,22,80,.04)}
.expl .vign{aspect-ratio:16/10;background:#efeaf8;position:relative;overflow:hidden}
.expl .vign img{width:100%;height:100%;object-fit:cover}
.expl .vign span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9d92b8;
  text-align:center;padding:14px}
.expl .txt{padding:30px 32px 34px}
.expl h3{margin-bottom:12px}
.expl .txt>*:first-child{margin-top:0}
.expl p{color:var(--gris);font-size:16px;line-height:1.62}
.expl a{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-weight:600;
        font-size:15px;color:var(--violet);text-decoration:none}
.expl a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- formules, liste a filets ---------- */
.li{display:grid;grid-template-columns:250px 1fr 190px;gap:40px;align-items:baseline;
    padding:34px 0;border-top:1px solid var(--trait);transition:background .25s var(--e)}
.li:last-of-type{border-bottom:1px solid var(--trait)}
.li h3{font-size:26px}
.li .d{color:var(--gris);font-size:16px;line-height:1.6;max-width:none}
.li .p{font-size:34px;font-weight:600;letter-spacing:-.028em;text-align:right;white-space:nowrap}
.li .p span{display:block;font-size:13px;font-weight:500;color:var(--gris);letter-spacing:0}
.li.mis{background:var(--blanc);margin-inline:-34px;padding:34px;border-radius:var(--r-carte);
        border-top-color:transparent;box-shadow:0 16px 44px rgba(43,22,80,.06)}
.li.mis+.li{border-top-color:var(--trait)}
.li:not(.mis):hover{background:rgba(255,255,255,.6)}
@media(max-width:1307px){.li.mis{margin-inline:-20px;padding:34px 20px}}
.tagj{display:inline-block;margin-top:10px;padding:5px 13px;border-radius:var(--r-pill);
      background:var(--jv);color:var(--prune);font-size:11px;font-weight:600;
      letter-spacing:.13em;text-transform:uppercase}

/* ---------- methode, pile decalee ---------- */
.mth{display:grid;grid-template-columns:1fr 1fr;gap:0 90px}
.et{padding:30px 0 30px 34px;border-left:2px solid var(--trait);position:relative}
.et::before{content:"";position:absolute;left:-7px;top:42px;width:12px;height:12px;
            border-radius:50%;background:var(--jv);box-shadow:0 0 0 5px var(--casse)}
.et h3{margin-bottom:8px}
.et p{color:var(--gris);font-size:16px;line-height:1.62}
.et.der{border-left-color:var(--jv);grid-column:1 / -1}

/* ---------- wordpress ---------- */
/* ---------- le conteneur WordPress ---------- */
.wp{background:var(--blanc);border-radius:28px;padding:52px;display:grid;
    grid-template-columns:1fr 1fr;gap:0 56px;box-shadow:0 20px 56px rgba(43,22,80,.05)}
.wp-tete{grid-column:1;grid-row:1;align-self:center}
.wp-image{grid-column:2;grid-row:1}
.wp-image img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
              border-radius:var(--r-img);display:block}
.wp h2{max-width:14ch;margin-top:22px}
.wp-tete p{margin-top:16px;font-size:16.5px;max-width:42ch}

.wp-marque{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.wp-marque img{width:212px;height:auto}
.wp-note{font-size:12.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
         color:var(--violet);max-width:13em;line-height:1.6}

.wp-args{grid-column:1 / -1;grid-row:2;margin-top:46px;
         display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.wp-args .arg{border-top:1px solid var(--trait);padding:26px 0}
.wp-args .arg:first-of-type,.wp-args .arg:nth-of-type(2){padding-top:26px}
.wp-args .arg h4{margin-bottom:8px}
.wp-args .arg p{color:var(--gris);font-size:16px;line-height:1.62;max-width:46ch}

.wp-faire{grid-column:1 / -1;grid-row:3;margin-top:44px;padding-top:34px;
          border-top:1px solid var(--trait);display:grid;grid-template-columns:1fr 1fr;
          gap:22px 56px}
.wp-faire p.intro{grid-column:1 / -1;font-weight:600;font-size:17px;margin-bottom:2px}
.wp-faire div{position:relative;padding-left:30px}
.wp-faire div::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
                      border-radius:50%;background:var(--jv)}
.wp-faire b{display:block;font-size:16.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
.wp-faire span{font-size:15px;color:var(--gris);line-height:1.55}

/* ---------- realisations, grille asymetrique ---------- */
.rea{display:grid;grid-template-columns:1.6fr 1fr;gap:22px}
.rea .col{display:grid;gap:22px}
.slot{border-radius:var(--r-img);background:#efeaf8;box-shadow:inset 0 0 0 1px var(--trait);
      display:flex;align-items:flex-end;padding:24px;min-height:180px}
.slot span{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
           color:#9d92b8}
.slot.grand{aspect-ratio:4/3}
.aveu{background:var(--blanc);border-radius:var(--r-carte);padding:32px 36px;margin-top:26px;
      box-shadow:inset 3px 0 0 var(--violet)}
.aveu p{color:var(--gris);font-size:16px;line-height:1.65}
.aveu p+p{margin-top:12px}

/* ---------- sections sombres ---------- */
.sombre{background:var(--prune);color:var(--blanc)}
.sombre .sur{color:var(--jv)}
.sombre .gris,.sombre .tete p{color:#cfc4e6}
.sombre a:not(.b){color:var(--jv)}

/* ---------- offre de lancement ---------- */
.prix{display:flex;align-items:flex-end;gap:28px;margin:40px 0 12px;flex-wrap:wrap}
.barre{position:relative;font-size:46px;font-weight:500;color:#a99ec6;line-height:1}
.barre::after{content:"";position:absolute;left:-4px;right:-4px;top:52%;height:3px;
              background:var(--jv);border-radius:2px;transform-origin:left}
.gros{font-size:clamp(64px,8vw,104px);font-weight:600;letter-spacing:-.045em;line-height:.86}
.eco{align-self:center;padding:9px 18px;border-radius:var(--r-pill);background:var(--jv);
     color:var(--prune);font-size:14px;font-weight:600}
.places{display:flex;border-radius:22px;overflow:hidden;
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);margin:38px 0 34px}
.pl{flex:1;padding:24px 26px;border-right:1px solid rgba(255,255,255,.18)}
.pl:last-child{border-right:0}
.pl .n{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
       color:#a99ec6;margin-bottom:9px}
.pl .s{font-size:19px;font-weight:600;color:var(--jv)}
.pl .m{font-size:14px;color:#cfc4e6;margin-top:5px}
.pl a{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:14px;
      font-weight:600;text-decoration:underline;text-underline-offset:4px}

/* ---------- comparatif ---------- */
table{width:100%;border-collapse:collapse;font-size:16px;color:inherit}
th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
   color:var(--violet);padding:0 22px 14px 0;border-bottom:1px solid var(--prune)}
th:first-child{color:var(--prune)}
td{padding:20px 22px 20px 0;border-bottom:1px solid var(--trait);vertical-align:top;
   line-height:1.55;color:var(--gris)}
td:first-child{color:var(--prune);font-weight:500}
tr:last-child td{border-bottom:0}

/* ---------- zone ---------- */
.communes{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0 30px}
.communes span{padding:12px 22px;border-radius:var(--r-pill);background:var(--blanc);
               font-weight:500;box-shadow:0 3px 12px rgba(43,22,80,.05)}

/* ---------- questions ---------- */
details{border-top:1px solid var(--trait)}
details:last-of-type{border-bottom:1px solid var(--trait)}
summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;font-size:19px;font-weight:600;
        letter-spacing:-.01em;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:8px;top:34px;width:11px;height:11px;
               border-right:2px solid var(--prune);border-bottom:2px solid var(--prune);
               transform:rotate(45deg);transition:transform .25s var(--e)}
details[open] summary::after{transform:rotate(-135deg);top:38px}
details .rep{padding:0 60px 28px 0;color:var(--gris);font-size:16px;line-height:1.65}

/* ---------- appel final ---------- */
.final{text-align:center}
.final h2{margin-inline:auto;max-width:16ch}
.final p{margin:20px auto 34px;color:#cfc4e6}
.final .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.tel{display:inline-flex;align-items:center;min-height:56px;padding:0 30px;
     border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);
     color:var(--blanc);text-decoration:none;font-weight:600}
.tel:hover{background:rgba(255,255,255,.08)}

/* ---------- pied de page ---------- */
footer{background:var(--blanc);border-top:1px solid var(--trait);padding:56px 0 40px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
footer img{height:24px;width:auto;margin-bottom:16px}
footer h5{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
          color:var(--violet);margin-bottom:14px}
footer ul{list-style:none;font-size:15px;line-height:2.1}
footer a{text-decoration:none;color:var(--gris)}
footer a:hover{color:var(--prune)}
.fbas{border-top:1px solid var(--trait);padding-top:24px;display:flex;gap:24px;
      font-size:14px;color:var(--gris);flex-wrap:wrap}
.fbas .r{margin-left:auto}

/* ---------- mobile ---------- */
@media(max-width:960px){
  section{padding:74px 0}
  .hero{padding:56px 0 74px}
  .hero .w,.quin,.mth,.wp,.rea,.constat .w{grid-template-columns:1fr;gap:34px}
  .quin>*:nth-child(even){margin-top:0}
  .shot{aspect-ratio:16/10;max-height:none}
  .li{grid-template-columns:1fr;gap:12px}
  .li .p{text-align:left}
  .li.mis{margin-inline:-20px;padding:26px 20px}
  .et.der{grid-column:auto}
  .wp{padding:30px;grid-template-columns:1fr !important;gap:0}
  .wp-tete,.wp-image,.wp-args,.wp-faire{grid-column:1 !important;grid-row:auto !important}
  .wp-image{margin-top:30px}
  .wp-args{margin-top:24px;grid-template-columns:1fr !important}
  .wp-faire{grid-template-columns:1fr;gap:18px;margin-top:32px}
  .wp-marque img{width:180px}
  .places{flex-direction:column}
  .pl{border-right:0;border-bottom:1px solid rgba(255,255,255,.18)}
  .pl:last-child{border-bottom:0}
  .nav nav{position:fixed;inset:0;z-index:60;background:var(--prune);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:104px 26px 46px;font-size:19px;overflow-y:auto;
    transform:translateY(-101%);visibility:hidden;
    transition:transform .38s var(--e),visibility 0s linear .38s}
  body.menu-ouvert .nav nav{transform:none;visibility:visible;transition-delay:0s}
  /* backdrop-filter cree un bloc conteneur : le panneau fixed s'y retrouve
     enferme des que la barre passe en .pose. On le retire pendant l'ouverture. */
  body.menu-ouvert .nav,body[data-hero].menu-ouvert .nav.pose{backdrop-filter:none}
  .nav nav a,body[data-hero] .nav nav a:not(.b),body[data-hero] .nav.pose nav a:not(.b){color:#fff}
  .nav nav a:not(.b){padding:19px 0;border-bottom:1px solid rgba(255,255,255,.15)}
  .nav nav a:not(.b):hover{border-bottom-color:var(--jv)}
  .nav nav a.b{margin-top:30px;align-self:flex-start}
  body.menu-ouvert .nav nav a.b2{background:var(--jv);color:var(--prune);
    box-shadow:inset 0 0 0 1.5px var(--jv)}
  body.menu-ouvert .nav nav a.b2:hover{background:#bef632;box-shadow:inset 0 0 0 1.5px #bef632}
  .burger{display:block}
  .cmp{overflow-x:auto}
  .cmp table{min-width:620px}
  .fgrid{grid-template-columns:1fr;gap:28px}
}

/* ==========================================================================
   Composants des pages interieures
   ========================================================================== */

/* bandeau de page interieure */
.pt{padding:74px 0 60px;border-bottom:1px solid var(--trait)}
.pt .w{display:grid;grid-template-columns:1.15fr 1fr;gap:60px;align-items:end}
.fil{font-size:14px;color:var(--gris);margin-bottom:18px}
.zone-lien{font-size:15.5px;color:var(--gris);max-width:46ch}
.zone-lien a{color:var(--prune);font-weight:600;text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--jv);white-space:nowrap}
.zone-lien a:hover{box-shadow:inset 0 -7px 0 var(--jv)}
.fil a{text-decoration:none}
.fil a:hover{text-decoration:underline;text-underline-offset:3px}
.pt p{color:var(--gris);font-size:18px}
.prixgros{font-size:clamp(44px,5.6vw,68px);font-weight:600;letter-spacing:-.042em;line-height:.95}
.prixgros small{display:block;font-size:15px;font-weight:500;color:var(--gris);
                letter-spacing:0;margin-top:14px;line-height:1.4}
.pt .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* deux colonnes de contenu */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.duo h3{margin-bottom:16px}

/* listes de contenu */
.coche{list-style:none}
.coche li{position:relative;padding-left:30px;margin-bottom:12px;color:var(--gris);font-size:16px;
          line-height:1.6}
.coche li::before{content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
                  border-radius:50%;background:var(--jv)}
.coche li strong{color:var(--prune);font-weight:600}
.croix li::before{background:none;left:2px;top:6px;width:11px;height:11px;
                  box-shadow:inset 0 0 0 1.5px #cfc3e6;border-radius:50%}

/* profils */
.profil{background:var(--blanc);border-radius:var(--r-carte);padding:28px 30px;
        box-shadow:0 12px 34px rgba(43,22,80,.04)}
.profil h4{margin-bottom:8px}
.profil p{color:var(--gris);font-size:16px;line-height:1.6}

/* pages du site livre */
.pages-liv{counter-reset:pg;list-style:none;margin-top:8px}
.pages-liv li{counter-increment:pg;display:grid;grid-template-columns:52px minmax(0,1fr);
              column-gap:18px;row-gap:6px;padding:22px 0;border-top:1px solid var(--trait);
              align-items:baseline}
.pages-liv li:last-child{border-bottom:1px solid var(--trait)}
.pages-liv li::before{content:counter(pg,decimal-leading-zero);grid-column:1;grid-row:1;
                      font-size:14px;font-weight:600;color:var(--violet);letter-spacing:.06em}
.pages-liv b{grid-column:2;grid-row:1;font-size:18px;font-weight:600}
.pages-liv span{grid-column:2;grid-row:2;color:var(--gris);font-size:16px;line-height:1.6;
                max-width:70ch}

/* tableaux de tarifs */
.grille{width:100%;border-collapse:collapse;font-size:16px;margin-top:8px}
.grille th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.14em;
           text-transform:uppercase;color:var(--violet);padding:0 20px 12px 0;
           border-bottom:1px solid var(--prune)}
.grille td{padding:20px 20px 20px 0;border-bottom:1px solid var(--trait);vertical-align:top;
           line-height:1.55;color:var(--gris)}
.grille td:first-child{color:var(--prune);font-weight:600;white-space:nowrap}
.grille td.px{color:var(--prune);font-weight:600;font-size:20px;white-space:nowrap;text-align:right}
.grille tr:last-child td{border-bottom:0}
.bloc-t{background:var(--blanc);border-radius:var(--r-carte);padding:34px 36px;min-width:0;
        box-shadow:0 14px 40px rgba(43,22,80,.04);margin-bottom:26px}
.bloc-t h3{margin-bottom:18px}

/* encart */
.encart{background:var(--blanc);border-radius:var(--r-carte);padding:30px 34px;
        box-shadow:inset 3px 0 0 var(--violet)}
.encart p{color:var(--gris);font-size:16px;line-height:1.65}
.encart p+p{margin-top:12px}
.encart strong{color:var(--prune);font-weight:600}
.sombre+.sombre{margin-top:54px}
.sombre .encart{background:rgba(255,255,255,.07);box-shadow:inset 3px 0 0 var(--jv)}
.sombre .encart p{color:#cfc4e6}
.sombre .encart strong{color:var(--blanc)}

/* formulaire */
.form{display:grid;grid-template-columns:1fr 1fr;gap:22px;min-width:0;background:var(--blanc);
      border-radius:28px;padding:40px;box-shadow:0 20px 56px rgba(43,22,80,.05)}
.champ{display:flex;flex-direction:column;gap:8px;min-width:0}
.champ.plein{grid-column:1 / -1}
.champ label{font-size:14px;font-weight:600;letter-spacing:-.005em}
.champ .aide{font-size:13px;font-weight:400;color:var(--gris)}
.champ input,.champ select,.champ textarea{
  width:100%;min-width:0;max-width:100%;min-height:54px;padding:14px 20px;border:0;border-radius:var(--r-pill);
  background:var(--casse);box-shadow:inset 0 0 0 1px var(--trait);
  font:400 16px Poppins,system-ui,sans-serif;color:var(--prune);outline:0;
  transition:box-shadow .2s var(--e)}
.champ textarea{border-radius:22px;min-height:130px;resize:vertical;line-height:1.6}
.champ input::placeholder,.champ textarea::placeholder{color:#9d92b8}
.champ input:focus,.champ select:focus,.champ textarea:focus{
  box-shadow:inset 0 0 0 2px var(--violet),0 0 0 4px rgba(122,90,248,.18)}
.champ.case{flex-direction:row;align-items:flex-start;gap:12px}
.champ.case input{min-height:0;width:20px;height:20px;flex:none;margin-top:3px;border-radius:6px}
.champ.case label{font-weight:400;font-size:14px;color:var(--gris);line-height:1.55}

/* coordonnees */
.coord{display:grid;gap:20px}
.coord a.gros-tel{display:flex;align-items:center;gap:16px;background:var(--blanc);
  border-radius:var(--r-carte);padding:24px 28px;text-decoration:none;
  box-shadow:0 12px 34px rgba(43,22,80,.04);transition:transform .22s var(--e)}
.coord a.gros-tel:hover{transform:translateY(-3px)}
.coord .gros-tel b{font-size:26px;font-weight:600;letter-spacing:-.02em;display:block}
.coord .gros-tel span{font-size:14px;color:var(--gris)}
.coord .gros-tel.mail b{font-size:19px;overflow-wrap:anywhere}

/* pages legales */
.legal{max-width:74ch}
.legal h2{margin:52px 0 18px;font-size:26px}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--gris);margin-bottom:14px;font-size:16px;line-height:1.7}
.legal ul{list-style:none;margin:0 0 14px}
.legal li{position:relative;padding-left:26px;margin-bottom:9px;color:var(--gris);font-size:16px;
          line-height:1.6}
.legal li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;
                  border-radius:50%;background:var(--jv)}
.trou{display:inline-block;padding:2px 10px;border-radius:var(--r-pill);background:var(--jv);
      color:var(--prune);font-weight:600;font-size:14px}

@media(max-width:960px){
  .pt .w,.duo,.form{grid-template-columns:1fr;gap:26px}
  .pt{padding:52px 0 44px}
  .form{padding:26px}
  .grille{font-size:15px}
  .grille td.px{font-size:18px}
}


/* ---------- bande photo pleine largeur ---------- */
.bande-photo{position:relative;min-height:420px;display:flex;align-items:center;
             overflow:hidden;background:var(--prune)}
.bande-photo .fond{position:absolute;inset:0}
.bande-photo .fond img{width:100%;height:100%;object-fit:cover}
.bande-photo .fond::after{content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(27,14,50,.92) 0%,rgba(27,14,50,.74) 44%,rgba(27,14,50,.3) 100%)}
.bande-photo .fond span{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:#7b6ea0}
.bande-photo .w{position:relative;z-index:1;color:#fff;padding:76px 0}
.bande-photo h2{max-width:16ch;color:#fff}
.bande-photo p{color:#e7e0f5;margin-top:20px;max-width:46ch;font-size:18px}

/* ---------- duo image et texte ---------- */
.it{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.it>*{min-width:0}
.it.inv>*:first-child{order:2}
.it .img{border-radius:var(--r-img);overflow:hidden;aspect-ratio:4/3;background:#efeaf8;
         position:relative;box-shadow:inset 0 0 0 1px var(--trait)}
.it .img img{width:100%;height:100%;object-fit:cover}
.it .img span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#9d92b8;
  text-align:center;padding:20px}

/* ---------- mosaique des metiers : chaque image porte sa legende ---------- */
.mos{display:grid;grid-template-columns:repeat(6,1fr);gap:26px 22px;align-items:start}
.mos figure{margin:0;min-width:0}
.mos .m2{grid-column:span 2}
.mos .m3{grid-column:span 3}
.mos .m4{grid-column:span 4}
.mos img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-img);background:#efeaf8}
.mos .r45 img{aspect-ratio:4/5}
.mos .r169 img{aspect-ratio:16/9}
.mos .r219 img{aspect-ratio:21/9}
.mos figcaption{padding-top:16px}
.mos figcaption b{display:block;font-size:18px;font-weight:600;letter-spacing:-.012em;
                  margin-bottom:7px}
.mos figcaption span{display:block;color:var(--gris);font-size:15.5px;line-height:1.6;
                     max-width:46ch}

/* bande d'appel posee sous une grille */
.appel-bande{margin-top:44px;background:var(--blanc);border-radius:var(--r-carte);
  padding:32px 36px;box-shadow:0 14px 40px rgba(43,22,80,.04);
  display:grid;grid-template-columns:1fr auto;gap:24px 40px;align-items:center}
.appel-bande b{display:block;font-size:20px;font-weight:600;letter-spacing:-.016em;
               margin-bottom:7px}
.appel-bande span{display:block;color:var(--gris);font-size:16px;line-height:1.6;max-width:52ch}
.appel-bande .btns{display:flex;gap:12px;flex-wrap:wrap}

@media(max-width:960px){
  .hero{min-height:auto;padding:150px 0 60px}
  .hero h1{max-width:none}
  .gar .w{grid-template-columns:1fr 1fr}
  .gar div{border-right:0;border-bottom:1px solid var(--trait);padding:20px 0}
  .gar div:nth-last-child(-n+2){border-bottom:0}
  .it{grid-template-columns:1fr;gap:28px}
  .it.inv>*:first-child{order:0}
  .mos{grid-template-columns:1fr}
  .mos .m2,.mos .m3,.mos .m4{grid-column:span 1}
  .mos .r45 img{aspect-ratio:4/3}
  .appel-bande{grid-template-columns:1fr;padding:26px 24px}
  .bande-photo .w{padding:56px 0}
  .barre-haut .zone{display:none}
  .barre-haut a{margin-left:0}
}

/* bandeau des pages interieures : plus bas que celui de l'accueil */
.hero-page{min-height:min(520px,58vh);padding:180px 0 62px}
.hero-page .w{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end}
.hero-page h1{font-size:clamp(34px,4.4vw,54px);max-width:18ch}
.hero-page p:not(.fil){font-size:18px;max-width:46ch;margin:18px 0 0}
.hero-page .fil{color:#c9bfe3;margin-bottom:14px}
.hero-page .fil a{color:#fff;text-decoration:none}
.hero-page .fil a:hover{text-decoration:underline;text-underline-offset:3px}
.hero-page .prixgros{color:#fff;text-align:right}
.hero-page .prixgros small{color:#cfc4e6}
.hero-page .btns{margin-top:26px}
@media(max-width:960px){
  .hero-page{min-height:auto;padding:140px 0 48px}
  .hero-page .w{grid-template-columns:1fr;gap:24px}
  .hero-page .prixgros{text-align:left}
}
.prix-inline{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}

/* ==========================================================================
   Correctifs mobile : les styles en ligne des gabarits doivent ceder
   ========================================================================== */
@media(max-width:960px){
  .it,.duo,.form,.quin,.hero-page .w,.constat .w,.wp,.mth,.rea,.gar .w{
    grid-template-columns:1fr !important}
  .gar .w{grid-template-columns:1fr 1fr !important}
  .it[style]{grid-template-columns:1fr !important}
  .bloc-t{overflow-x:auto}
  .grille{min-width:480px}
  .duo[style]{grid-template-columns:1fr !important;gap:22px !important}
  .quin>*:nth-child(even){margin-top:0 !important}
  .legal{max-width:none}
  .communes span{padding:10px 16px;font-size:15px}
}
@media(max-width:560px){
  .gar .w{grid-template-columns:1fr !important}
  .gar div:nth-last-child(-n+2){border-bottom:1px solid var(--trait)}
  .gar div:last-child{border-bottom:0}
}

/* ==========================================================================
   Decor des bandeaux prune : les formes du signe, comme sur la couverture
   de la charte. Elles debordent des bords et restent derriere le contenu.
   ========================================================================== */
.sombre{position:relative;overflow:hidden;isolation:isolate}
.sombre>.w{position:relative;z-index:2}
.sombre::before,.sombre::after{content:"";position:absolute;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-size:contain}
/* forme violette, en haut a droite */
.sombre::before{background-image:url(img/deco-violet.svg);
  width:660px;height:565px;top:-330px;right:-150px;transform:rotate(172deg)}
/* forme jaune-vert, en bas a gauche, largement hors cadre */
.sombre::after{background-image:url(img/deco-jaune-vert.svg);
  width:700px;height:599px;bottom:-372px;left:-286px;transform:rotate(-12deg)}

/* le bandeau d'appel final est centre : le decor s'ecarte davantage */
.sombre.final::before{width:560px;height:479px;top:-292px;right:-186px}
.sombre.final::after{width:600px;height:513px;bottom:-330px;left:-300px}

/* sur une bande photo, aucune forme : la photo porte deja le decor */
.bande-photo::before,.bande-photo::after{display:none}

@media(max-width:960px){
  .sombre::before{width:360px;height:308px;top:-186px;right:-96px}
  .sombre::after{width:380px;height:325px;bottom:-206px;left:-176px}
}

/* ==========================================================================
   Survol des images de contenu : l'image s'assombrit et bouge legerement.
   Ne s'applique ni aux bandeaux, ni au logo, ni aux bandes photo de fond.
   ========================================================================== */
.it .img,.mos figure img,.expl .vign,.wp-image img,.aveu-img{
  transition:transform .45s var(--e),box-shadow .35s var(--e),filter .35s var(--e)}
.it .img,.expl .vign,.mos figure,.wp-image{position:relative}

/* le voile prune qui apparait au survol */
.it .img::after,.expl .vign::after,.mos figure::after,.wp-image::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:rgba(27,14,50,.28);opacity:0;transition:opacity .35s var(--e)}
.mos figure::after{border-radius:var(--r-img);bottom:auto;
  height:calc(100% - 0px)}
.it .img:hover::after,.expl:hover .vign::after,.wp-image:hover::after{opacity:1}

/* le mouvement */
.it .img:hover img,.expl:hover .vign img,.wp-image:hover img{transform:scale(1.045)}
.it .img,.expl .vign,.wp-image{overflow:hidden}
.it .img img,.expl .vign img,.wp-image img{transition:transform .55s var(--e)}
.it .img:hover,.wp-image:hover{transform:translateY(-4px);
  box-shadow:0 18px 44px rgba(43,22,80,.14)}
.expl{transition:transform .3s var(--e),box-shadow .3s var(--e)}
.expl:hover{transform:translateY(-4px);box-shadow:0 22px 52px rgba(43,22,80,.10)}

/* la mosaique des metiers : la legende reste lisible, seule l'image bouge */
.mos figure{overflow:visible}
.mos figure img{will-change:transform}
.mos figure:hover img{transform:translateY(-5px) scale(1.03);
  box-shadow:0 18px 40px rgba(43,22,80,.16);filter:brightness(.82)}
.mos figure::after{display:none}
.mos figcaption b{transition:color .3s var(--e)}
.mos figure:hover figcaption b{color:var(--violet)}

@media(prefers-reduced-motion:reduce){
  .it .img:hover img,.expl:hover .vign img,.wp-image:hover img,
  .mos figure:hover img{transform:none}
  .it .img:hover,.wp-image:hover,.expl:hover{transform:none}
}

/* ==========================================================================
   Onglets : les prestations, et la grille tarifaire
   ========================================================================== */
.ongl{display:flex;gap:10px;margin-bottom:34px;flex-wrap:wrap}
.ongl button{padding:0 24px;min-height:52px;display:inline-flex;align-items:center;gap:10px;
  border:0;border-radius:var(--r-pill);font:600 15.5px Poppins,system-ui,sans-serif;
  color:var(--prune);background:var(--blanc);box-shadow:inset 0 0 0 1.5px var(--trait);
  cursor:pointer;transition:background .25s var(--e),box-shadow .25s var(--e),transform .22s var(--e)}
.ongl button:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1.5px #cfc3e6,
  0 8px 20px rgba(43,22,80,.08)}
.ongl button[aria-selected="true"]{background:var(--grad);box-shadow:none}
.ongl button:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(122,90,248,.45)}
.ongl .prix-o{font-weight:600;opacity:.72}
.ongl button[aria-selected="true"] .prix-o{opacity:1}

.pan{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;
  background:var(--blanc);border-radius:26px;padding:44px;
  box-shadow:0 20px 56px rgba(43,22,80,.05)}
.pan[hidden]{display:none}
.pan .v{border-radius:20px;overflow:hidden;aspect-ratio:4/3;position:relative}
.pan .v img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s var(--e),filter .35s var(--e)}
.pan .v:hover img{transform:scale(1.045);filter:brightness(.86)}
.pan h3{font-size:26px;margin-bottom:14px}
.pan .gros-p{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1;margin-bottom:6px}
.pan .gros-p small{display:block;font-size:14px;font-weight:500;color:var(--gris);
  letter-spacing:0;margin-top:10px}
.pan ul{list-style:none;margin-top:22px}
.pan li{position:relative;padding-left:28px;margin-bottom:9px;font-size:15.5px;color:var(--gris);
  line-height:1.55}
.pan li::before{content:"";position:absolute;left:0;top:8px;width:10px;height:10px;
  border-radius:50%;background:var(--jv)}
.pan .btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.pan .anim{opacity:1;transform:none}

@media(max-width:960px){
  .pan{grid-template-columns:1fr !important;padding:26px;gap:26px}
  .ongl{gap:8px}
  .ongl button{min-height:46px;padding:0 18px;font-size:14.5px}
}

/* ==========================================================================
   Réalisations, format étude de cas : une bande par site livré.
   Tant qu'une place est libre, la bande décrit ce qui y sera écrit.
   ========================================================================== */
.cas{display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:center;
     padding:48px 0;border-top:1px solid var(--trait)}
.cas:last-of-type{border-bottom:1px solid var(--trait)}
.cas.inv>*:first-child{order:2}
.cas .ecran{border-radius:18px;overflow:hidden;box-shadow:0 18px 46px rgba(43,22,80,.10);
            background:#efeaf8}
.cas .ecran img{width:100%;display:block;transition:transform .55s var(--e),filter .35s var(--e)}
.cas .ecran:hover img{transform:scale(1.03);filter:brightness(.88)}
.cas .attente{border-radius:18px;background:#efeaf8;box-shadow:inset 0 0 0 1px var(--trait);
  aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;text-align:center;padding:34px}
.cas .attente b{font-size:17px;font-weight:600}
.cas .attente span{font-size:14.5px;color:var(--gris);max-width:32ch;line-height:1.55}
.cas .meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.cas .nom{font-size:28px;font-weight:600;letter-spacing:-.024em;line-height:1.15;margin-bottom:16px}
.cas .q{margin-top:20px}
.cas .q b{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
          color:var(--violet);margin-bottom:6px}
.cas .q p{color:var(--gris);font-size:16px;line-height:1.6}
.cas .b{margin-top:26px}
.eti{display:inline-block;padding:6px 15px;border-radius:var(--r-pill);background:var(--jv);
     color:var(--prune);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
     line-height:1.5}
.eti-c{background:transparent;box-shadow:inset 0 0 0 1px #cfc3e6;color:var(--gris)}
.eti-l{background:var(--prune);color:#fff}

@media(max-width:960px){
  .cas{grid-template-columns:1fr !important;gap:26px;padding:34px 0}
  .cas.inv>*:first-child{order:0}
}

/* Repère de travail : tout ce qui reste à compléter avant la mise en ligne.
   À supprimer le jour de la publication. */
[data-a-remplir]{position:relative}
[data-a-remplir]::before{content:"À COMPLÉTER";position:absolute;top:-9px;left:0;z-index:3;
  background:var(--violet);color:#fff;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  padding:3px 9px;border-radius:999px}
.cas .attente[data-a-remplir]::before{top:12px;left:12px}
.cas .q[data-a-remplir]::before{top:0;left:auto;right:0}
.cas a[data-a-remplir]::before{top:-7px;left:14px}

/* ==========================================================================
   Fiche d'une réalisation
   ========================================================================== */
.fiche-tete{padding:44px 0 60px}
.fiche-tete .w{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.fiche-tete h1{font-size:clamp(34px,4.6vw,54px);max-width:14ch;margin-top:16px}
.fiche-tete .res{font-size:19px;line-height:1.6;color:var(--gris);max-width:38em;margin-top:20px}
.ariane{font-size:14px;color:var(--gris);padding:26px 0 0}
.ariane a{text-decoration:none}
.ariane a:hover{text-decoration:underline;text-underline-offset:3px}

.tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}
.tags span{padding:7px 15px;border-radius:var(--r-pill);background:var(--blanc);font-size:13px;
  font-weight:500;color:var(--gris);box-shadow:inset 0 0 0 1px var(--trait)}

.meta4{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--prune);
  margin-top:34px;padding-top:22px}
.meta4 div{padding-right:18px;border-right:1px solid var(--trait);min-width:0}
.meta4 div:last-child{border-right:0;padding-right:0}
.meta4 b{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet);margin-bottom:7px}
.meta4 span{display:block;font-size:18px;font-weight:600;letter-spacing:-.016em;line-height:1.3}

.capture{border-radius:18px;overflow:hidden;box-shadow:0 20px 50px rgba(43,22,80,.12);
  background:#efeaf8;position:relative}
.capture img{width:100%;display:block;transition:transform .55s var(--e),filter .35s var(--e)}
.capture:hover img{transform:scale(1.03);filter:brightness(.9)}
.capture.attente{aspect-ratio:16/10;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;text-align:center;padding:34px;box-shadow:inset 0 0 0 1px var(--trait)}
.capture.attente b{font-size:17px;font-weight:600}
.capture.attente span{font-size:14.5px;color:var(--gris);max-width:32ch;line-height:1.55}

.livre{list-style:none;counter-reset:l}
.livre li{counter-increment:l;display:grid;grid-template-columns:46px minmax(0,1fr);
  column-gap:16px;row-gap:5px;padding:20px 0;border-top:1px solid var(--trait);align-items:baseline}
.livre li:last-child{border-bottom:1px solid var(--trait)}
.livre li::before{content:counter(l,decimal-leading-zero);grid-column:1;grid-row:1;font-size:13px;
  font-weight:600;color:var(--violet);letter-spacing:.06em}
.livre b{grid-column:2;grid-row:1;font-size:17.5px;font-weight:600}
.livre span{grid-column:2;grid-row:2;color:var(--gris);font-size:15.5px;line-height:1.58}

.contexte{display:grid;grid-template-columns:1fr 1.2fr;gap:60px}

@media(max-width:960px){
  .fiche-tete .w,.contexte{grid-template-columns:1fr !important;gap:30px}
  .fiche-tete{padding:30px 0 44px}
  .meta4{grid-template-columns:1fr 1fr;row-gap:20px}
  .meta4 div:nth-child(2){border-right:0;padding-right:0}
}
/* l'emplacement de capture est cliquable tant que la vraie image n'est pas là */
a.attente{transition:transform .25s var(--e),box-shadow .25s var(--e)}
a.attente:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px #cfc3e6,
  0 14px 34px rgba(43,22,80,.09)}

/* Les formes ne doivent jamais passer derrière une colonne de texte :
   sur les bandes à deux colonnes, on les repousse hors du champ. */
.sombre.deco-large::before{width:520px;height:445px;top:-268px;right:-232px}
.sombre.deco-large::after{width:560px;height:479px;bottom:-320px;left:-330px}

/* Repères de travail : ils ne doivent pas recouvrir ce qu'ils annoncent. */
.meta4 [data-a-remplir]::before{display:none}
.b[data-a-remplir]{margin-top:34px}
.capture.attente[data-a-remplir]::before{top:14px;left:14px}
/* la capture d'un site livré, dans son cadre de navigateur */
a.ecran{display:block;text-decoration:none;border-radius:var(--r-img);overflow:hidden}
a.ecran img{width:100%;display:block;transition:transform .5s var(--e),filter .35s var(--e)}
a.ecran:hover img{transform:scale(1.025);filter:brightness(.92)}
.capture{box-shadow:none;background:none;border-radius:var(--r-img);overflow:hidden}