/* p-faq.css — « Le sommaire interrogeable » (refonte design 14-10).
   Héros forêt dont l'objet principal est le champ de recherche ; les trois sections deviennent des entrées de sommaire
   (grand numéro, lignes titre / texte / flèche) ; les questions : colonne épinglée (champ + index des catégories) et grand accordéon numéroté.
   Tout est préfixé body.p-faq. Palette et polices existantes seulement. */

body.p-faq{
  --fq-rule:rgba(18,15,11,.26);
  --fq-rule-d:rgba(247,243,234,.22);
}
body.p-faq main.int{counter-reset:fqs}

/* ============================== HÉROS ============================== */
body.p-faq main.int #top{
  background:var(--forest-900);color:var(--paper);
  padding-block:clamp(48px,7vw,104px) clamp(52px,6vw,92px);
}
@media (min-width:900px){
  body.p-faq main.int #top .pgh-grid.has-media{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,5.5vw,96px);align-items:center}
  body.p-faq main.int #top .pgh-grid.has-media .pgh-media{aspect-ratio:4/5;max-height:640px;width:100%}
}
body.p-faq main.int #top .breadcrumb ol,
body.p-faq main.int #top .breadcrumb a,
body.p-faq main.int #top .breadcrumb li+li::before{color:var(--muted-dark)}
body.p-faq main.int #top .breadcrumb a:hover{color:var(--paper);border-color:var(--orange)}
body.p-faq main.int #top .breadcrumb [aria-current="page"]{color:var(--paper)}
body.p-faq main.int #top .page-title{
  margin-top:clamp(22px,3vw,40px);max-width:15ch;color:var(--paper);
  font-size:clamp(2.5rem,4.6vw,5rem);font-weight:200;line-height:1.02;letter-spacing:-.035em;
}
body.p-faq main.int #top .lead{max-width:46ch;margin-top:22px;color:rgba(247,243,234,.86)}
body.p-faq main.int #top :focus-visible{outline-color:var(--orange-light)}

/* le champ de recherche */
body.p-faq main.int .fq-finder{margin-top:clamp(28px,3.6vw,44px)}
body.p-faq main.int .fq-search{position:relative;display:block}
body.p-faq main.int .fq-glass{position:absolute;left:20px;top:50%;translate:0 -50%;width:26px;height:26px;pointer-events:none}
body.p-faq main.int .fq-input{
  display:block;width:100%;margin:0;border:0;border-radius:10px;background:var(--paper);color:var(--ink-900);
  font:300 1.4rem/1.2 var(--font-display);letter-spacing:-.01em;appearance:none;-webkit-appearance:none;
}
body.p-faq main.int .fq-input::placeholder{color:var(--muted);opacity:1}
body.p-faq main.int .fq-input::-webkit-search-cancel-button{
  -webkit-appearance:none;appearance:none;width:20px;height:20px;margin-left:8px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 5l10 10M15 5L5 15' fill='none' stroke='%23120F0B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
body.p-faq main.int .fq-search-xl .fq-glass{color:var(--forest-700)}
body.p-faq main.int .fq-search-xl .fq-input{height:72px;padding:0 20px 0 64px;font-size:clamp(1.25rem,2.1vw,1.7rem)}
body.p-faq main.int .fq-search-xl .fq-input:focus-visible{outline:3px solid var(--orange-light);outline-offset:3px}

/* puces : les trois sections existantes */
body.p-faq main.int .fq-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
body.p-faq main.int .fq-chips .fq-pill{
  min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(247,243,234,.45);background:transparent;color:var(--paper);
  font:500 15px/1 var(--font-body);cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease;
}
body.p-faq main.int .fq-chips .fq-pill:hover{border-color:var(--orange-light)}
body.p-faq main.int .fq-chips .fq-pill[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);color:var(--ink-900)}

body.p-faq main.int #top .page-hero-actions{margin-top:clamp(30px,4vw,44px)}
body.p-faq main.int #top .btn-ghost{color:var(--paper);border-color:rgba(247,243,234,.5);background:transparent}
body.p-faq main.int #top .btn-ghost:hover{background:var(--paper);color:var(--ink-900);border-color:var(--paper)}

/* ============================== LES TROIS SECTIONS : entrées de sommaire ============================== */
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation){counter-increment:fqs;padding-block:clamp(64px,8vw,120px)}
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .section-head::before{
  content:counter(fqs,decimal-leading-zero) / "";display:block;margin-bottom:clamp(10px,1.6vw,22px);
  font:200 clamp(4.6rem,10vw,9.6rem)/.82 var(--font-display);letter-spacing:-.06em;color:var(--orange-deep);
}
body.p-faq main.int #ia-automatisation .section-head::before{color:var(--orange)}
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .sec-title{font-size:clamp(2.1rem,3.5vw,3.3rem);font-weight:300;line-height:1.04;letter-spacing:-.025em}
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .section-body{padding-top:0}
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .section-body .page-body{margin-top:14px;max-width:34ch;font-size:1.12rem}

/* disposition : titre et texte à gauche, lignes de sommaire à droite (bureau) */
body.p-faq main.int :is(#commencer,#ia-automatisation) > .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
body.p-faq main.int :is(#commencer,#ia-automatisation) .sec-top{display:contents}
body.p-faq main.int :is(#commencer,#ia-automatisation) .cards{margin-top:clamp(30px,5vw,48px)}
@media (min-width:1000px){
  body.p-faq main.int :is(#commencer,#ia-automatisation) > .wrap{grid-template-columns:minmax(0,4fr) minmax(0,8fr);grid-template-rows:auto 1fr;column-gap:clamp(40px,6vw,96px);align-items:start}
  body.p-faq main.int :is(#commencer,#ia-automatisation) .section-head{grid-column:1;grid-row:1;position:static}
  body.p-faq main.int :is(#commencer,#ia-automatisation) .section-body{grid-column:1;grid-row:2}
  body.p-faq main.int :is(#commencer,#ia-automatisation) .cards{grid-column:2;grid-row:1 / span 2;margin-top:clamp(10px,2vw,28px)}
}

/* la section avec photo : lignes à gauche, photo verticale à droite */
@media (min-width:900px){
  body.p-faq main.int #site-hebergement .pgs-split{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(40px,6vw,96px);align-items:start}
  body.p-faq main.int #site-hebergement .pgs-main{grid-column:1;grid-row:1}
  body.p-faq main.int #site-hebergement .pgs-media{grid-column:2;grid-row:1;top:100px}
}
body.p-faq main.int #site-hebergement .sec-top{display:block}
body.p-faq main.int #site-hebergement .sec-top .section-head{position:static}
body.p-faq main.int #site-hebergement .cards{margin-top:clamp(28px,4vw,44px)}

/* lignes de sommaire : titre, texte, flèche */
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .cards{
  display:block;container:fqrows / inline-size;border-top:1px solid var(--fq-rule);
}
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .cards li{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:center;
  padding:clamp(24px,2.8vw,40px) 0;border:0;border-bottom:1px solid var(--fq-rule);border-radius:0;background:none;color:inherit;
}
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .cards li:last-child:nth-child(odd){grid-column:auto}
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .cards h3{
  grid-column:1;font:200 clamp(1.7rem,3vw,2.7rem)/1.08 var(--font-display);letter-spacing:-.025em;transition:color .2s ease;
}
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .cards p{grid-column:1;margin:0;max-width:56ch}
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .cards .card-go{grid-column:2;grid-row:1 / span 2;margin:0;font-size:26px}
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .cards .card-go svg{width:1.1em;height:1.1em}
@container fqrows (min-width:760px){
  body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .cards li{grid-template-columns:minmax(0,5fr) minmax(0,5fr) auto;gap:6px clamp(24px,3vw,48px)}
  body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .cards p{grid-column:2;grid-row:1}
  body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .cards .card-go{grid-column:3;grid-row:1}
}
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .cards li:has(.card-link):hover{
  background:none;box-shadow:none;translate:none;border-color:var(--fq-rule);
}
body.p-faq main.int :is(#commencer,#site-hebergement) .cards li:has(.card-link):hover h3{color:var(--orange-deep)}
body.p-faq main.int :is(#commencer,#site-hebergement,#ia-automatisation) .cards li:hover .card-go{transform:translateX(8px)}

/* section sombre : mêmes lignes, en papier sur encre */
body.p-faq main.int #ia-automatisation .cards{border-top-color:var(--fq-rule-d)}
body.p-faq main.int #ia-automatisation .cards li{border-bottom-color:var(--fq-rule-d);background:none}
body.p-faq main.int #ia-automatisation .cards li:has(.card-link):hover{background:none;border-color:var(--fq-rule-d);box-shadow:none}
body.p-faq main.int #ia-automatisation .cards h3{color:var(--paper);font-weight:200}
body.p-faq main.int #ia-automatisation .cards li:has(.card-link):hover h3{color:var(--orange-light)}
body.p-faq main.int #ia-automatisation .cards p{color:var(--muted-dark)}
body.p-faq main.int #ia-automatisation .cards .card-go{color:var(--orange-light)}
body.p-faq main.int #ia-automatisation .section-body .page-body{color:var(--muted-dark)}

/* ============================== LES QUESTIONS : colonne épinglée + grand accordéon ============================== */
body.p-faq main.int .section.faq{padding-block:clamp(72px,9vw,130px);scroll-margin-top:84px}
body.p-faq main.int #questions{scroll-margin-top:84px}
@media (min-width:1000px){
  body.p-faq main.int #questions{min-height:calc(100svh - 84px)} /* même avec une seule réponse, la section peut se caler en haut de l'écran */
  body.p-faq main.int .faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(44px,6vw,104px)}
  body.p-faq main.int .faq-grid .section-head{position:sticky;top:100px}
}
body.p-faq main.int .faq .sec-title{font-size:clamp(2.2rem,3.6vw,3.5rem);font-weight:200;line-height:1.03;letter-spacing:-.03em}

body.p-faq main.int .fq-rail{margin-top:clamp(24px,3vw,36px)}
body.p-faq main.int .fq-search-s .fq-glass{left:16px;width:22px;height:22px;color:var(--ink-900)}
body.p-faq main.int .fq-search-s .fq-input{height:58px;padding:0 16px 0 50px;border:1px solid var(--ink-900);background:transparent;font-size:1.15rem}
body.p-faq main.int .fq-search-s .fq-input:focus-visible{outline:3px solid var(--orange-deep);outline-offset:3px}
body.p-faq main.int .fq-index{margin-top:22px;border-top:2px solid var(--ink-900);list-style:none;padding:0}
body.p-faq main.int .fq-index li{border-bottom:1px solid var(--fq-rule)}
body.p-faq main.int .fq-index .fq-pill{
  display:flex;align-items:baseline;gap:16px;width:100%;padding:16px 4px 16px 4px;border:0;background:none;color:var(--ink-900);text-align:left;cursor:pointer;
  font:300 1.25rem/1.2 var(--font-display);letter-spacing:-.01em;box-shadow:inset 0 0 0 var(--orange);transition:padding .2s ease,color .2s ease,box-shadow .2s ease;
}
body.p-faq main.int .fq-index .fq-n{flex:none;width:1.8rem;font:500 12px/1 var(--font-body);letter-spacing:.12em;color:var(--orange-deep);font-variant-numeric:tabular-nums}
body.p-faq main.int .fq-index .fq-pill:hover{color:var(--orange-deep)}
body.p-faq main.int .fq-index .fq-pill[aria-pressed="true"]{padding-left:16px;font-weight:400;box-shadow:inset 4px 0 0 var(--orange)}
body.p-faq main.int .fq-index .fq-pill:focus-visible{outline:3px solid var(--orange-deep);outline-offset:-3px}

body.p-faq main.int .faq-list{counter-reset:fqq;border-top:2px solid var(--ink-900)}
body.p-faq main.int .faq details{counter-increment:fqq;border-bottom:1px solid var(--fq-rule)}
body.p-faq main.int .faq details[hidden]{display:none}
body.p-faq main.int .faq summary{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;align-items:start;gap:0 14px;
  padding:clamp(22px,2.8vw,36px) 0;font:300 clamp(1.3rem,2.2vw,2rem)/1.2 var(--font-display);letter-spacing:-.015em;
}
body.p-faq main.int .faq summary::before{
  content:counter(fqq,decimal-leading-zero) / "";padding-top:.62em;
  font:500 13px/1 var(--font-body);letter-spacing:.12em;color:var(--orange-deep);font-variant-numeric:tabular-nums;
}
body.p-faq main.int .faq summary > span{min-width:0}
body.p-faq main.int .faq .faq-ico{align-self:start;margin-top:.5em}
body.p-faq main.int .faq details[open] summary{font-weight:400}
body.p-faq main.int .faq .faq-a{
  max-width:none;padding:0 clamp(0px,5vw,72px) clamp(26px,3vw,40px) calc(3.2rem + 14px);
  color:var(--ink-900);font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.62;
}
body.p-faq main.int .faq .faq-a p{max-width:62ch}
body.p-faq main.int .faq summary:focus-visible{outline:3px solid var(--orange-deep);outline-offset:2px}
::highlight(fq-hit){background-color:var(--orange-light);color:var(--ink-900)}

/* aucun résultat */
body.p-faq main.int .fq-none{padding:clamp(28px,4vw,52px) 0;font:200 clamp(1.8rem,3.2vw,3rem)/1.1 var(--font-display);letter-spacing:-.025em}
body.p-faq main.int .fq-none[hidden]{display:none}
body.p-faq main.int .fq-none a{color:var(--ink-900);text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:.2em}
body.p-faq main.int .fq-none a:hover{color:var(--orange-deep)}

@media (max-width:599px){
  body.p-faq main.int .fq-search-xl .fq-input{height:64px}
  body.p-faq main.int .faq summary{grid-template-columns:2.4rem minmax(0,1fr) auto}
  body.p-faq main.int .faq .faq-a{padding-left:calc(2.4rem + 14px);padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  body.p-faq main.int .fq-chips .fq-pill,body.p-faq main.int .fq-index .fq-pill{transition:none}
}