/* Le Studio : styles de la page « service ».
   Fichier chargé dans l'ordre fixé par src/layouts/Base.astro : base.css, styles de la page, megamenu.css, ambiance.css. */

/* ==================================================================
   Page Service (v4) : gabarit d'une expertise détaillée, pensé pour le référencement (service.py, une fiche par page).
   Mêmes composants que les pages Expertises, Méthode et Projets. Pas de motion propre à ces pages.
================================================================== */
/* Hero : le label sert de fil d'Ariane, la colonne de droite porte la fiche du service */
.crumb a{color:var(--on-night-2);transition:color var(--d-1) ease}
.crumb [aria-hidden]{color:var(--on-night-2)}
@media (hover:hover) and (pointer:fine){ .crumb a:hover{color:var(--on-night)} }
.phero__aside{display:grid}
.fiche div{display:grid;grid-template-columns:5.5rem minmax(0,1fr);align-items:center;gap:16px;min-height:48px;padding-block:8px;border-block-start:1px solid var(--line-night)}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.fiche dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;color:var(--on-night-2)}
.fiche dd{font-size:var(--fs-lg);letter-spacing:-.03em;font-weight:450;line-height:1.15}
/* Mot géant : il remplit la largeur, sauf sur un écran large et bas, où la hauteur le limite (le hero doit tenir dans l'écran) */
.phero .wordmark{font-size:clamp(4rem,min(var(--mot,25vw),40svh),31rem)}
@media (max-width:767.98px){ .phero .wordmark{font-size:clamp(4rem,min(calc(var(--mot,25vw) * .93),40svh),31rem)} }   /* marges mobiles élargies (recette du 26 oct.) */
/* --mot : taille du mot géant, réglée par fiche quand le mot est plus long ou plus court que « Webflow » */

/* L'essentiel : la réponse courte, puis une question (en haut), sa réponse (en bas) et l'emplacement du visuel, puis trois faits */
.intro{display:grid;gap:32px;margin-block-start:clamp(56px,7vw,120px)}
.intro__text{display:grid;gap:clamp(28px,4vw,48px);align-content:space-between}
.intro__title{font-size:var(--fs-h2s);font-weight:450;letter-spacing:-.045em;line-height:1.05;max-inline-size:11em}
.intro__bas{display:grid;gap:24px}
.intro__bas .lead{max-inline-size:29em}
/* Emplacement du visuel : un aplat gris en attendant une photo ou un mockup */
.intro__media{border-radius:var(--r-md);overflow:hidden;aspect-ratio:16/10;background:var(--grey)}
.facts{display:grid;gap:24px;border-block-start:1px solid var(--line);padding-block-start:clamp(20px,2.2vw,30px);margin-block-start:clamp(40px,5vw,72px)}
.facts dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;text-transform:uppercase;color:var(--ink-2);margin-block-end:8px}
.facts dd{max-inline-size:24em}
@media (min-width:768px){ .facts{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)} }
@media (min-width:1024px){
  .intro{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:var(--gutter);align-items:stretch}
  .intro__media{aspect-ratio:16/9}
}

/* Ce qui est compris : cadre blanc, une ligne par prestation (le nom a la taille des autres listes du site) */
.incl{background:var(--white);padding:clamp(72px,9vw,150px) calc(var(--gutter) - var(--inset))}
.incl__head{display:grid;gap:20px;justify-items:start;margin-block-end:clamp(40px,5vw,80px)}
.incl__head h2{max-inline-size:12em}
.incl__list li{display:grid;gap:10px 24px;padding-block:clamp(18px,2vw,30px);border-block-start:1px solid var(--line)}
/* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.incl__list .meta{color:var(--ink-2)}
.incl__name{font-size:var(--fs-h2s);font-weight:450;letter-spacing:-.045em;line-height:1.05}
.incl__list p{color:var(--ink-2);max-inline-size:27em}
@media (min-width:900px){
  .incl__list li{grid-template-columns:clamp(3rem,6vw,6rem) minmax(0,6fr) minmax(0,5fr);align-items:baseline}
}

/* Pourquoi : cadre noir, quatre cartes sur noir doux. Numéro, titre et texte sont trois rangées partagées par les cartes
   (sous-grille) : les titres s'alignent, les textes démarrent à la même hauteur, quelle que soit leur longueur. */
.why{padding:clamp(72px,9vw,150px) calc(var(--gutter) - var(--inset)) calc(var(--gutter) - var(--inset))}
.why__head{display:grid;gap:24px;margin-block-end:clamp(48px,6vw,96px)}
.why__head .lead{color:var(--on-night-2);max-inline-size:26em}
.why__grid{display:grid;gap:clamp(8px,.9vw,14px)}
.why__card{display:grid;grid-template-rows:auto auto 1fr;row-gap:12px;background:var(--night-2);border-radius:var(--r-md);padding:clamp(20px,2vw,32px)}
.why__card .meta{color:var(--on-night-2);margin-block-end:clamp(44px,8vw,116px)}
.why__card p{color:var(--on-night-2);max-inline-size:22em}
@supports (grid-template-rows:subgrid){ .why__card{grid-template-rows:subgrid;grid-row:span 3} }
@media (min-width:640px){ .why__grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){
  .why__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:var(--gutter);align-items:end}
}
@media (min-width:1180px){ .why__grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* Déroulé : trois temps, grands numéros orange (comme sur la page Méthode) */
.flow__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-block-end:clamp(40px,6vw,88px)}
.flow__head h2{max-inline-size:11em}
.flow{display:grid;gap:48px}
.flow li{display:grid;gap:14px;align-content:start}
.flow__n{font-size:clamp(4.5rem,9.4vw,10rem);font-weight:450;letter-spacing:-.07em;line-height:.85;color:var(--accent);margin-inline-start:-.04em}
.flow .rule{margin-block:clamp(12px,1.4vw,22px) clamp(6px,.8vw,12px)}
.flow p{color:var(--ink-2);max-inline-size:22em}
@media (min-width:900px){ .flow{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)} }

/* Projets liés : deux ou trois cartes, un mockup de mise en situation par projet (format 4/3, comme sur l'accueil) */
.work__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-block-end:clamp(40px,6vw,88px)}
.work__head sup{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.02em;vertical-align:top;position:relative;inset-block-start:.9em;margin-inline-start:.6em;color:var(--ink-2);font-weight:400}
.trio{display:grid;gap:clamp(40px,6vw,72px)}
.case{display:grid;gap:18px;align-content:start}
.case__media{position:relative;border-radius:var(--r-md);overflow:hidden;background:var(--grey);aspect-ratio:4/3}
/* la parallaxe porte sur l'enveloppe, le zoom du survol sur l'image : sur le même élément, le script écrasait le zoom */
.case__par{position:absolute;inset:-9% 0;block-size:118%}
.case__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;height:100%;object-fit:cover;transition:scale var(--d-3) var(--ease-out)}
.case__meta{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.case__meta .meta{color:var(--ink-2);text-align:end}
/* Carte sans projet : un emplacement gris, sans lien */
.case--vide .case__meta h3{color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){ .case:hover .case__media img{scale:1.045} }
@media (min-width:900px){
  .trio{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gutter)}
  .trio--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Questions */
.faq__head{display:grid;gap:20px;margin-block-end:clamp(32px,4vw,64px);justify-items:start}
.q{border-block-start:1px solid var(--line)}
.q:last-child{border-block-end:1px solid var(--line)}
.q summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-block:clamp(18px,2vw,30px);cursor:pointer;list-style:none;font-size:var(--fs-h3l);font-weight:450;letter-spacing:-.04em;line-height:1.08}
.q summary::-webkit-details-marker{display:none}
.q summary svg{inline-size:clamp(20px,2vw,30px);block-size:clamp(20px,2vw,30px);flex:none;transition:rotate var(--d-2) var(--ease-out),color var(--d-1) ease}
.q[open] summary svg{rotate:45deg}
.q p{color:var(--ink-2);max-inline-size:36em;padding-block-end:clamp(22px,2.4vw,36px);font-size:var(--fs-md);line-height:1.5}
@media (hover:hover) and (pointer:fine){ .q summary:hover svg{color:var(--accent)} }
@supports (interpolate-size:allow-keywords){
  @media (prefers-reduced-motion: no-preference){
    :root{interpolate-size:allow-keywords}
    .q::details-content{block-size:0;overflow:clip;transition:block-size .45s var(--ease-out),content-visibility .45s allow-discrete}
    .q[open]::details-content{block-size:auto}
  }
}

/* Autres services (ou secteurs) : cadre noir, index numéroté (variante B retenue le 10 nov. 2026), titre sur deux lignes. */
.others{padding:clamp(72px,9vw,150px) calc(var(--gutter) - var(--inset))}
.others__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin-block-end:clamp(40px,6vw,88px)}

/* Titre en trois lignes voulues (retours à la ligne écrits dans contenus.py), sans coupure supplémentaire sur grand écran (16 oct. 2026) */
#titre{width:max-content;max-width:calc(100vw - 88px)}

/* ==================================================================
   Gabarits du 28 oct. 2026 (nouveau sitemap) : Service et Secteur partagent ce fichier.
================================================================== */
/* L'essentiel d'un service : l'asset UI Nuit animée du service remplit le bloc visuel, sur fond nuit ;
   d'un secteur : le mockup d'un projet du secteur */
.intro__media:has(.asset,.uix){background:var(--night)}
.intro__img{display:block;inline-size:100%;block-size:100%;object-fit:cover}
/* Enjeux d'un secteur : trois cartes sur une ligne */
@media (min-width:900px){ .why__grid--3{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* Services recommandés d'un secteur : une carte par service, son asset UI sur fond nuit, son nom et la raison pour ce secteur */
.svc__media{background:var(--night)}
.svc .case__meta{display:grid;justify-content:stretch;gap:8px}
.svc .case__meta p{color:var(--ink-2);max-inline-size:26em}
.svc[data-soon]{cursor:default}
@media (min-width:900px){ .trio--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1280px){ .trio--4{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* Index numéroté. Une ligne par lien entre deux filets, flèche ronde ; au survol, le volet descend (faq.js) et la flèche se remplit */
.others__index{display:grid;list-style:none;padding:0;margin:0;border-block-start:1px solid var(--line-night)}
.others__index li{border-block-end:1px solid var(--line-night)}
.others__index li:last-child{border-block-end:0}   /* filet final retiré : « le filet sépare, il ne ferme pas » (règle validée par Jeremy, 12 nov. 2026) */
.oi{display:grid;grid-template-columns:clamp(40px,5vw,72px) minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2vw,28px);padding-block:clamp(18px,2.2vw,30px)}
.oi .volet{inset-inline:calc(-1 * clamp(10px,1.4vw,24px))}
.oi__n{color:var(--on-night-2)}
.oi__nom{font-size:var(--fs-h2s);font-weight:450;letter-spacing:-.045em;line-height:1.08}
.oi__nom .roll{line-height:1.08}
.oi__fl{inline-size:clamp(44px,4vw,60px);block-size:clamp(44px,4vw,60px);border-color:var(--line-night)}
.oi__fl svg{transition:transform var(--d-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .oi:hover .roll > span,.oi:hover .roll::after{transform:translateY(-100%)}
  .oi:hover .oi__fl{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
  .oi:hover .oi__fl svg{transform:translateX(3px)}
}
.oi:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-sm)}

@media (prefers-reduced-motion: reduce){ .oi__fl svg{transition:none} }