/* Pages offres (outils/seo/offres.mjs) : une même ossature pour les trois offres, faite des composants des pages validées.
   Premier écran et cadre d'À propos, cartes à aplat des Actualités, cas en production d'À propos, « Aller plus loin » de l'accueil.
   Les règles de base (po-page à k-r) servent aussi aux pages cas clients. */
.po-page{--soutenu:#EEE7DA}
.po-s{position:relative;padding-top:calc(var(--m) * 1.5);padding-bottom:calc(var(--m) * 1.5)}
.po-soutenu{background:var(--soutenu);--fond:#F8F4EC;--case:#E6DED0;--filet:#DCD3C3}
.po-profond{background:#073D40}
.po-s+.po-s:not(.po-soutenu):not(.aplat){border-top:1px solid var(--filet)}

/* Tête de section : titre à gauche, phrase ou action à droite, sur la grille de 12 */
.po-tete{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px var(--gout);align-items:end;margin-bottom:calc(var(--m) * .8)}
.po-tete h2{grid-column:1/8;font-size:clamp(32px,3.6vw,56px);line-height:1.02;letter-spacing:-.045em}
.po-tete .po-intro{grid-column:8/-1;max-width:30em;font-size:17px;line-height:1.5;color:var(--gris);text-wrap:pretty}
.po-tete>.btn{grid-column:9/-1;justify-self:end}

/* Premier écran des pages cas clients */
.po-hp h1{max-width:13.5em;font-size:clamp(40px,5.9vw,92px)}
.po-hp .hp-p{max-width:36em}
.po-hp .hp-p b{display:block;margin-bottom:10px}
.po-hp .hp-fil{flex-wrap:nowrap;white-space:nowrap}
.po-page .hp-actions .btn{min-height:56px}

/* Compositions en cubes des pages cas clients */
.po-cubes{--c:calc(var(--m) / 2);display:grid;grid-template-columns:repeat(var(--cols),var(--c));grid-auto-rows:var(--c)}
.po-cubes i{display:block}
.k-f{background:#0A5457}.k-t{background:#0D7377}.k-m{background:#5A9A96}.k-c{background:#B4CFCA}.k-p{background:#F8F4EC}.k-r{background:#F7222C}
.po-cubes i[class]{transition:transform .45s var(--ease)}

/* ---------- Offres ---------- */
/* Grands titres de section, à la taille des pages validées */
.po-page:not(.cas-page) .po-tete h2{grid-column:1/8;font-size:var(--t-h2);line-height:1;letter-spacing:-.05em;text-wrap:balance}
.po-page:not(.cas-page) .po-tete .po-intro{grid-column:8/-1;padding-bottom:.35em;font-size:19px;line-height:1.45}
.po-intro .af-pastille{margin-left:4px;vertical-align:1px}

/* Le cadre de l'offre, posé sur la nappe : quatre cases à gauche, la phrase à droite (mission d'À propos) */
.po-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--fond);box-shadow:inset 0 0 0 1px var(--filet)}
.po-split-v{list-style:none;display:grid;grid-template-columns:1fr 1fr;padding:0;margin:calc(var(--m) * .67);min-height:calc(var(--m) * 7);background:#EFE8DB;box-shadow:inset 0 0 0 1px #DCD3C2}
.po-split-v li{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:calc(var(--m) * .45);font-size:clamp(20px,1.6vw,24px);font-weight:500;line-height:1.15;letter-spacing:-.03em}
.po-split-v li:nth-child(2n){box-shadow:inset 1px 0 0 #DCD3C2}
.po-split-v li:nth-child(n+3){box-shadow:inset 0 1px 0 #DCD3C2}
.po-split-v li:nth-child(4){box-shadow:inset 1px 0 0 #DCD3C2,inset 0 1px 0 #DCD3C2}
.po-split-v .ic-f{width:44px;height:44px;color:#0A5457}
.po-split-c{display:flex;flex-direction:column;justify-content:center;padding:calc(var(--m) * .67);box-shadow:inset 1px 0 0 var(--filet)}
.po-split-c h2{font-size:clamp(32px,3.3vw,50px);line-height:1.04;letter-spacing:-.048em;text-wrap:balance}
.po-split-p{margin-top:calc(var(--m) * .45);max-width:31em;font-size:17px;line-height:1.5;color:var(--gris)}
.po-split-p b{font-weight:500;color:var(--encre)}
.po-split-c .lien-s{align-self:flex-start;margin-top:calc(var(--m) * .45);gap:10px}
.po-split-c .btn{align-self:flex-start;margin-top:calc(var(--m) * .45)}

/* Le choix clé : cartes à aplat des Actualités, un ou deux mots en bas à gauche, sans lien donc sans survol */
.po-tuiles{list-style:none;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:var(--gout);margin:0;padding:0}
.po-tuiles>li{display:flex;min-width:0}

/* Tableau de comparaison (duels-pme.mjs) : une ligne par test, un filet teal sur le modèle devant */
.po-tab-defile{overflow-x:auto}
.po-tab{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4;color:var(--encre)}
.po-tab caption{caption-side:bottom;padding-top:16px;text-align:left;font-size:14px;color:var(--gris)}
.po-tab th,.po-tab td{padding:16px 20px 16px 0;text-align:left;vertical-align:top;font-weight:400;border-bottom:1px solid var(--filet)}
.po-tab thead th{padding-bottom:12px;font-weight:500;border-bottom:1px solid var(--encre)}
.po-tab thead th+th{padding-left:16px}
.po-tab thead small{display:block;font-weight:400;color:var(--gris)}
.po-tab tbody th{width:38%;font-weight:500}
.po-tab small{display:block;margin-top:4px;font-size:14px;font-weight:400;color:var(--gris)}
.po-tab td{width:31%;font-size:20px;font-weight:500;letter-spacing:-.02em}
.po-tab td.devant{padding-left:16px;box-shadow:inset 3px 0 0 var(--teal)}
.po-tab td:not(.devant){padding-left:16px}
.po-tab tr.sans-mesure td{font-size:16px;font-weight:400;letter-spacing:0;color:var(--gris)}
.po-tuile{--fond:#FBFBF8;position:relative;display:flex;flex-direction:column;flex:1;min-width:0;background:var(--fond);box-shadow:inset 0 0 0 1px var(--filet)}
.ton-f{--bg:#0A5457;--tx:#F8F4EC}
.ton-r{--bg:#F7222C;--tx:#F8F4EC}
.ton-c{--bg:#F8F4EC;--tx:#0A5457;--bord:#CFC9BB}
.po-tuile-v{display:flex;align-items:flex-end;height:calc(var(--m) * 3.4);margin:1px 1px 0;padding:0 calc(var(--m) * .45) calc(var(--m) * .45);background:var(--bg);color:var(--tx);outline:1px solid var(--bord,transparent);outline-offset:-1px}
.po-mot{margin:0}
.po-mot b{display:block;font-size:clamp(32px,2.8vw,42px);font-weight:500;line-height:.95;letter-spacing:-.045em}
.po-tuile-c{display:flex;flex-direction:column;gap:10px;padding:calc(var(--m) * .4) calc(var(--m) * .45) calc(var(--m) * .5)}
.po-tuile-c h3{font-size:clamp(22px,1.7vw,26px);line-height:1.18;letter-spacing:-.025em}
.po-tuile-c p{font-size:15px;line-height:1.5;color:var(--gris)}

/* Étapes : grands numéros sous un filet noir */
.po-etapes{list-style:none;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:0;padding:0;border-top:1px solid var(--encre)}
.po-etapes li{display:flex;flex-direction:column;gap:12px;padding:24px 28px 0 0}
.po-etapes li+li{padding-left:28px;border-left:1px solid var(--filet)}
.po-num{margin-bottom:12px;font-size:clamp(48px,5vw,80px);font-weight:500;line-height:.9;letter-spacing:-.06em;color:var(--teal-f)}
.po-etapes h3{font-size:clamp(22px,1.7vw,26px);line-height:1.1;letter-spacing:-.035em}
.po-etapes p{max-width:22em;font-size:15.5px;line-height:1.5;color:var(--gris)}

/* Cas en production : cartes à chiffre et logo sur pastille (À propos) */
.po-pr-tete{display:flex;align-items:flex-end;justify-content:space-between;gap:24px var(--m);margin-bottom:calc(var(--m) * .75)}
.po-pr-tete h2{max-width:12em;font-size:var(--t-h2);line-height:1;letter-spacing:-.05em;text-wrap:balance}
.po-pr-tete .btn{flex:none}
.po-suite{margin-top:calc(var(--m) * .75)}
.po-cc-liste{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gout);margin:0;padding:0}
.po-cc-liste.duo{grid-template-columns:repeat(2,minmax(0,1fr))}
.po-cc{--encre:#18181B;--gris:#5B5B60;--filet:#E4E1D8;--fond:#FBFBF8;--teal:#0D7377;--teal-c:#B4CFCA;position:relative;display:flex;flex-direction:column;height:100%;color:var(--encre);background:var(--fond);transition:translate .15s var(--ease)}
.po-cc::after{content:"";position:absolute;inset:0;z-index:4;box-shadow:inset 0 0 0 1px transparent;pointer-events:none;transition:box-shadow .15s var(--ease)}
.po-cc::before{content:"";position:absolute;left:0;top:0;z-index:4;width:100%;height:3px;background:var(--teal);transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.po-cc-aplat{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:calc(var(--m) * 4.2);padding:calc(var(--m) * .45) calc(var(--m) * .45) calc(var(--m) * .5);background:#073D40;color:#F8F4EC}
.po-cc.clair .po-cc-aplat{background:#EFE8DB;color:#0A5457}
/* Logos dans une case de même hauteur ; le logo en texte, centré dessus, à surface d'encre égale à celle des symboles */
.po-logo{display:block;align-self:flex-start;width:auto;height:72px}
.po-logo.mot{width:250px;max-width:100%;object-fit:contain;object-position:left center}
.po-cc .s{font-size:14.5px;line-height:1.45;color:var(--gris)}
.po-cc-n{display:flex;align-items:flex-end;gap:14px;margin:auto 0 0}
.po-cc-n b{font-size:clamp(84px,6.6vw,108px);font-weight:500;line-height:.82;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.po-cc-n.mot{flex-direction:column;align-items:flex-start;gap:10px}
.po-cc-n.mot b{font-size:clamp(44px,3.6vw,56px);line-height:.95;letter-spacing:-.045em}
.po-cc-n span{max-width:10em;padding-bottom:4px;font-size:17px;font-weight:500;line-height:1.2;letter-spacing:-.015em}
.po-cc-corps{display:flex;flex-direction:column;flex:1;gap:8px;padding:calc(var(--m) * .45) calc(var(--m) * .45) calc(var(--m) * .5)}
.po-cc h3{font-size:clamp(22px,1.7vw,26px);line-height:1.1;letter-spacing:-.035em}
.po-cc h3 a{text-decoration:none}
.po-cc h3 a::after{content:"";position:absolute;inset:0;z-index:5}
.po-cc h3 a:focus-visible{outline:none}
.po-cc:has(h3 a:focus-visible){outline:2px solid var(--teal);outline-offset:3px}
.po-cc-bas{display:flex;align-items:stretch;height:var(--m);margin:0;box-shadow:inset 0 1px 0 var(--filet);font-size:13.5px;color:var(--gris)}
.po-cc-bas>span{display:flex;align-items:center;flex:1;padding:0 calc(var(--m) * .45)}
.po-cc-bas .lire{flex:none;justify-content:center;width:var(--m);padding:0;box-shadow:inset 1px 0 0 var(--filet);color:var(--encre);transition:background-color .15s var(--ease),color .15s var(--ease)}
@media (hover:hover){
  .po-cc:hover::after{box-shadow:inset 0 0 0 1px var(--teal-c)}
  .po-cc:hover::before{transform:scaleX(1)}
  .po-cc:hover .lire{background:var(--encre);color:#fff}
  .po-cc:hover .lire .chev{transform:translateX(3px)}
}
.po-cc:focus-within::before{transform:scaleX(1)}
.po-cc:has(h3 a:focus-visible) .lire{background:var(--encre);color:#fff}
.po-cc:active{translate:0 1px}
.po-cc:active .lire{background:#000;color:#fff}
/* Une seule référence : la carte en largeur, aplat à gauche */
.po-cc-liste.seul{grid-template-columns:minmax(0,1fr)}
.po-cc-liste.seul .po-cc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:1fr auto}
.po-cc-liste.seul .po-cc-aplat{grid-row:1/3;min-height:calc(var(--m) * 5.6);padding:calc(var(--m) * .6)}
.po-cc-liste.seul .po-cc-corps{justify-content:center;gap:12px;padding:calc(var(--m) * .6)}
.po-cc-liste.seul .po-cc h3{font-size:clamp(26px,2vw,28.8px)}
.po-cc-liste.seul .po-cc-bas{grid-column:2}

/* Questions : le modèle de l'accueil, posé sur le papier */
.po-page .fa{border-top:1px solid var(--filet)}

/* Aller plus loin : les trois tuiles de l'accueil, bleu profond, crème, rouge, sur l'aplat bleu */
.po-loin{--pl-filet:rgba(248,244,236,.22);position:relative;z-index:2;padding:calc(var(--m) * 1.5) 0 calc(var(--m) * 1.25);background:#0A5457;color:#F8F4EC}
.po-loin-h{padding:0 var(--cote);margin-bottom:calc(var(--m) * .9);font-size:var(--t-h2);line-height:1;letter-spacing:-.05em}
.po-loin-bande{padding-bottom:calc(var(--m) * .5)}
.po-loin-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr auto;padding:0 var(--cote);box-shadow:inset 0 1px 0 var(--pl-filet),inset 0 -1px 0 var(--pl-filet)}
.po-loin-col{position:relative;display:grid;grid-row:span 2;grid-template-rows:subgrid;min-width:0;color:#F8F4EC;text-decoration:none;box-shadow:inset 1px 0 0 var(--pl-filet)}
.po-loin-col:last-child{box-shadow:inset 1px 0 0 var(--pl-filet),inset -1px 0 0 var(--pl-filet)}
.po-loin-col::after{content:"";position:absolute;left:0;right:0;top:100%;height:calc(var(--m) * .5);box-shadow:inset 1px 0 0 var(--pl-filet);pointer-events:none}
.po-loin-col:last-child::after{box-shadow:inset 1px 0 0 var(--pl-filet),inset -1px 0 0 var(--pl-filet)}
.po-loin-col::before{content:"";position:absolute;left:0;top:0;z-index:2;width:100%;height:3px;background:#F8F4EC;transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.po-loin .c2::before{background:#0A5457}
.po-loin-haut{display:grid;grid-template-columns:1fr auto;grid-template-areas:"ic fl" "t t";row-gap:22px;align-content:start;min-height:calc(var(--m) * 3.4);padding:calc(var(--m) * .6)}
.po-loin-ic{grid-area:ic;width:24px;height:24px;color:var(--pl-ic)}
.po-loin-fl{grid-area:fl;color:var(--pl-fl)}
.po-loin-t{grid-area:t;font-size:var(--t-h3);font-weight:500;line-height:1.05;letter-spacing:-.04em}
.po-loin-t .nm{display:inline-block}
.po-loin-p{margin:0;padding:calc(var(--m) * .4) calc(var(--m) * .6) calc(var(--m) * .5);max-width:27em;font-size:15px;line-height:1.5;color:#B4CFCA;box-shadow:inset 0 1px 0 var(--pl-filet)}
.po-loin .c1 .po-loin-haut{background:#073D40;color:#F8F4EC;--pl-ic:#F8F4EC;--pl-fl:rgba(248,244,236,.62)}
.po-loin .c2 .po-loin-haut{background:#F8F4EC;color:#18181B;--pl-ic:#0A5457;--pl-fl:#5B5B60}
.po-loin .c3 .po-loin-haut{background:#F7222C;color:#F8F4EC;--pl-ic:#F8F4EC;--pl-fl:rgba(248,244,236,.8)}
.po-loin-col:focus-visible{outline:0}
.po-loin-col:focus-visible :is(.po-loin-haut,.po-loin-p){outline:2px solid #F8F4EC;outline-offset:-6px}
.po-loin .c2:focus-visible .po-loin-haut{outline-color:#0A5457}
@media (hover:hover){
  .po-loin-col:hover::before{transform:scaleX(1)}
  .po-loin-col:hover :is(.po-loin-ic,.po-loin-fl){color:currentColor}
}
.po-loin-col:focus-visible::before{transform:scaleX(1)}

@media (max-width:1100px){
  .po-tete h2,.po-page:not(.cas-page) .po-tete h2{grid-column:1/-1}
  .po-tete .po-intro,.po-page:not(.cas-page) .po-tete .po-intro{grid-column:1/-1}
  .po-tete>.btn{grid-column:1/-1;justify-self:start}
  .po-split{grid-template-columns:1fr}
  .po-split-v{min-height:calc(var(--m) * 5.5);margin-bottom:0}
  .po-split-c{box-shadow:none}
  .po-tuiles{grid-template-columns:repeat(min(var(--n),2),minmax(0,1fr))}
  .po-etapes{grid-template-columns:1fr 1fr}
  .po-etapes li:nth-child(odd){padding-left:0;border-left:0}
  .po-etapes li:nth-child(n+3){margin-top:28px;border-top:1px solid var(--filet)}
  .po-cc-liste,.po-cc-liste.duo{grid-template-columns:1fr}
  .po-cc,.po-cc-liste.seul .po-cc{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:1fr auto}
  .po-cc-aplat,.po-cc-liste.seul .po-cc-aplat{grid-row:1/3}
  .po-cc-bas{grid-column:2}
  .po-loin-haut,.po-loin-p{padding-left:calc(var(--m) * .45);padding-right:calc(var(--m) * .45)}
}
@media (max-width:760px){
  .po-tab,.po-tab tbody,.po-tab tr,.po-tab th,.po-tab td{display:block;width:auto}
  .po-tab caption{display:block;padding:0 0 16px}
  .po-tab thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .po-tab tr{padding:16px 0;border-bottom:1px solid var(--filet)}
  .po-tab th,.po-tab td{padding:0;border:0}
  .po-tab tbody th{width:auto;margin-bottom:12px}
  .po-tab td{width:auto;margin-top:12px;padding-left:12px;font-size:18px}
  .po-tab td.devant,.po-tab td:not(.devant){padding-left:12px}
  .po-tab td::before{content:attr(data-l);display:block;font-size:14px;font-weight:400;letter-spacing:0;color:var(--gris)}
  .po-tab tr.sans-mesure td{padding-left:0}
  .po-s{padding-top:calc(var(--m) * 1.25);padding-bottom:calc(var(--m) * 1.25)}
  .po-tete{margin-bottom:28px}
  .po-hp h1{font-size:clamp(32px,9.6vw,52px)}
  .po-page:not(.cas-page) .po-tete .po-intro{font-size:17px}
  .po-split-v{margin:16px 16px 0;min-height:0}
  .po-split-v li{gap:28px;padding:16px;font-size:18px}
  .po-split-v .ic-f{width:32px;height:32px}
  .po-split-c{padding:24px 16px 20px}
  .po-split-c h2{font-size:30px}
  .po-tuiles{grid-template-columns:1fr;gap:16px}
  .po-tuile-v{height:calc(var(--m) * 3.2);padding:0 16px 20px}
  .po-mot b{font-size:36px}
  .po-tuile-c{padding:18px 16px 20px}
  .po-etapes{grid-template-columns:1fr}
  .po-etapes li,.po-etapes li+li,.po-etapes li:nth-child(odd){padding:20px 0 4px;border-left:0;margin-top:0}
  .po-etapes li+li{border-top:1px solid var(--filet)}
  .po-etapes li:nth-child(n+3){margin-top:0}
  .po-num{font-size:52px;margin-bottom:4px}
  .po-pr-tete{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:24px}
  .po-pr-tete .btn{align-self:stretch;justify-content:center}
  .po-suite .btn{display:flex;justify-content:center}
  .po-cc,.po-cc-liste.seul .po-cc{display:flex}
  .po-cc-aplat,.po-cc-liste.seul .po-cc-aplat{min-height:calc(var(--m) * 3.6);padding:18px}
  .po-logo{height:60px}
  .po-logo.mot{width:210px}
  .po-cc-n b{font-size:76px}
  .po-cc-n.mot b{font-size:42px}
  .po-cc-corps,.po-cc-liste.seul .po-cc-corps{padding:18px 18px 20px}
  .po-cc-bas>span{padding:0 18px}
  .po-loin{padding:calc(var(--m) * 1.25) 0}
  .po-loin-h{padding:0 16px;margin-bottom:28px}
  .po-loin-bande{padding-bottom:0}
  .po-loin-cols{grid-template-columns:1fr;grid-template-rows:none;padding:0}
  .po-loin-col,.po-loin-col:last-child{display:flex;flex-direction:column;grid-row:auto;box-shadow:none}
  .po-loin-col+.po-loin-col{box-shadow:inset 0 1px 0 var(--pl-filet)}
  .po-loin-col::after{display:none}
  .po-loin-haut{row-gap:16px;min-height:calc(var(--m) * 2.6);padding:20px 16px}
  .po-loin-t{font-size:26px}
  .po-loin-p{padding:16px 16px 20px}
}
@media (prefers-reduced-motion:reduce){
  .po-cubes i[class],.po-cc,.po-cc::before,.po-cc::after,.po-cc-bas .lire,.po-loin-col::before{transition:none}
}
.po-pr-note{margin-top:calc(var(--m) * .75);font-size:17px;line-height:1.5;color:#F8F4EC}
.po-pr-note .af-pastille{margin-left:4px;vertical-align:1px;color:inherit;box-shadow:inset 0 0 0 1px currentColor}

/* Date de mise à jour et auteur, sous la réponse des pages « Combien ça coûte » */
.hp-maj{margin-top:18px;font-size:14px;line-height:1.4;color:var(--gris)}
.hp-maj a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hp-maj a:hover{color:var(--encre)}