/* Version C : les pages (Réalisations, Expertises, Studio, Contact). Les mêmes titres et la même marge que l'accueil,
   un seul emblème en perles par page, et le pied noir. Le fond : le crème rosé (html[data-fond=creme], par défaut), sous un ciel
   qui descend jusqu'à la nuit au fil de la page (plus bas, « le ciel », et c3/ciel.js). Les variables gardent aussi la « nuit
   chaude » (?fond=nuit dans l'adresse) et le premier fond, lavande (sans attribut), sans ciel. */
:root{
  --p-fond:#F7F5FB; --p-texte:#0E0A1F; --p-doux:#3A3450; --p-note:#5C554C; --p-accent:#4A2FD6; --p-etiq:#6B4EFF;
  --p-carte:rgba(255,255,255,.62); --p-champ:rgba(255,255,255,.78); --p-blanc:#fff; --p-reflet:rgba(255,255,255,.9);
  --p-bord:rgba(42,31,94,.14); --p-bord-fort:rgba(74,47,214,.24); --p-bord-champ:rgba(14,10,31,.16);
  --p-dialogue:#FBFAFF; --p-bande:#16112C; --p-erreur:#B3261E;
  --p-ciel:radial-gradient(55% 42% at 88% 6%,rgba(214,203,244,.6),rgba(214,203,244,0) 70%),
    radial-gradient(48% 38% at 6% 28%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    radial-gradient(70% 50% at 50% 112%,rgba(196,180,240,.55),rgba(196,180,240,0) 70%),
    linear-gradient(180deg,#FBFAFF 0%,#F2EDFC 55%,#E6DEF9 100%);
}
/* nuit chaude : un aubergine profond, éclairé de pêche et de violet ; texte crème */
html[data-fond=nuit]{
  color-scheme:dark;
  --p-fond:#1A1224; --p-texte:#F3EDE4; --p-doux:#DCD2E2; --p-note:#B7A9C3; --p-accent:#C9B6FF; --p-etiq:#F2B89A;
  --p-carte:rgba(243,237,228,.06); --p-champ:rgba(243,237,228,.08); --p-blanc:rgba(243,237,228,.1); --p-reflet:rgba(255,255,255,.05);
  --p-bord:rgba(243,237,228,.14); --p-bord-fort:rgba(201,182,255,.34); --p-bord-champ:rgba(243,237,228,.24);
  --p-dialogue:#231933; --p-bande:#120C1A; --p-erreur:#FF9F92;
  --p-ciel:radial-gradient(55% 45% at 88% 4%,rgba(242,184,154,.17),rgba(242,184,154,0) 70%),
    radial-gradient(60% 50% at 4% 96%,rgba(107,78,255,.22),rgba(107,78,255,0) 70%),
    linear-gradient(180deg,#1C1327 0%,#1A1224 60%,#170F20 100%);
}
/* crème rosée : un blanc chaud et rosé (pas beige), texte aubergine presque noir ; les textes secondaires restent lisibles
   sur les teintes plus profondes du ciel (lilas compris) */
html[data-fond=creme]{
  --p-fond:#FBF4EF; --p-texte:#1E1427; --p-doux:#46374D; --p-note:#594A53; --p-accent:#4A2FD6; --p-etiq:#4A2FD6;
  --p-carte:rgba(255,255,255,.74); --p-champ:#fff; --p-blanc:#fff; --p-reflet:rgba(255,255,255,.9);
  --p-bord:rgba(90,50,60,.13); --p-bord-fort:rgba(74,47,214,.24); --p-bord-champ:rgba(60,30,40,.18);
  --p-dialogue:#FFFAF6; --p-bande:#1E1427; --p-erreur:#B3261E;
  --p-ciel:radial-gradient(55% 42% at 90% 2%,rgba(242,184,154,.26),rgba(242,184,154,0) 70%),
    radial-gradient(50% 40% at 6% 30%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#FCF6F1 0%,#F9EDE7 60%,#F5E3DB 100%);
}
/* le fond uni est porté par la page entière ; le corps reste transparent pour laisser voir le ciel (en z-index -1) */
html:has(body.page){background:var(--p-fond)}
body.page{background:transparent;color:var(--p-texte)}
.ciel{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--p-ciel)}
/* sur le crème rosé, deux grands dégradés (pêche rosé, lavande) dérivent lentement derrière la page */
html[data-fond=creme] .ciel::before,html[data-fond=creme] .ciel::after{content:"";position:absolute;width:90vmax;height:90vmax;border-radius:50%;will-change:transform}
html[data-fond=creme] .ciel::before{left:-28vmax;top:-34vmax;background:radial-gradient(closest-side,rgba(244,168,146,.24),rgba(244,168,146,.08) 55%,rgba(244,168,146,0));animation:derive-a 32s ease-in-out infinite alternate}
html[data-fond=creme] .ciel::after{right:-30vmax;bottom:-38vmax;background:radial-gradient(closest-side,rgba(190,170,250,.2),rgba(190,170,250,.07) 55%,rgba(190,170,250,0));animation:derive-b 39s ease-in-out infinite alternate}
/* le ciel (« le crépuscule », choisi par Natacha, rendu vivant le 04/11/2026), dessiné par c3/ciel.js d'après la teinte de chaque section
   (data-ciel) ; la nuit tombe entre la dernière section claire et la première sombre (.ton-nuit, .bascule).
   .ciel-fixe : une toute petite image du ciel, agrandie sous toute la page, affichée tout de suite et qui ne coûte plus rien ensuite.
   .ciel-flot : le ciel qui coule, sur une toile fixe, qui remplace peu à peu l'image une fois la page chargée.
   .ciel-grain : un grain à peine visible, qui efface les marches de couleur une fois les petites images agrandies. */
html.ciel-pret .ciel{background:none;will-change:transform}
html.ciel-pret .ciel::before,html.ciel-pret .ciel::after{content:none}
body.page main{position:relative}
.ciel-fixe{position:absolute;z-index:-2;left:0;top:0;display:block;width:100%;height:100%;pointer-events:none}
.ciel-flot{position:absolute;left:0;top:0;display:block;width:100%;height:100vh;height:100lvh;opacity:0;transition:opacity 1.6s var(--sortie)}
html.ciel-vif .ciel-flot{opacity:1}
html.ciel-vif .ciel-fixe{visibility:hidden;transition:visibility 0s linear 1.6s}
.ciel-grain{position:absolute;inset:0;background-size:128px 128px}
/* sur un ordinateur modeste, rien ne bouge derrière la page sans raison */
html.pc-lent .ciel::before,html.pc-lent .ciel::after{animation:none}
html.sans-gl .ciel-grain{display:none}
html.pc-lent .zoom::backdrop{backdrop-filter:none}
/* sans le ciel (sans JavaScript), les sections sombres gardent un fond de nuit */
html:not(.ciel-pret) .page .ton-nuit{background:#1F1734}
/* entre le jour et la nuit, de l'espace : le ciel s'y assombrit lentement, sans passer derrière un texte */
.page .s.bascule,.page .gp.bascule{margin-top:clamp(180px,38vh,420px)}
/* une section sur la nuit : ses textes, ses cartes et ses boutons passent en clair */
.ton-nuit{
  --p-fond:#1E1427; --p-texte:#F3EDE4; --p-doux:#DCD2E2; --p-note:#BBAECA; --p-accent:#CDBBFF; --p-etiq:#F2B89A;
  --p-carte:rgba(243,237,228,.07); --p-champ:rgba(243,237,228,.1); --p-blanc:rgba(243,237,228,.16); --p-reflet:rgba(255,255,255,.06);
  --p-bord:rgba(243,237,228,.16); --p-bord-fort:rgba(205,187,255,.38); --p-bord-champ:rgba(243,237,228,.26); --p-dialogue:#2A1F36;
  color:var(--p-texte);
}
.ton-nuit .ex-num,.ton-nuit .gp-num,.ton-nuit .st-etapes .n{color:var(--violet-clair)}
.ton-nuit .ex-liste li::before{background:var(--violet-clair)}
.ton-nuit .btn--violet{--btn-encre:var(--creme);--btn-texte-encre:var(--nuit)}
@keyframes derive-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(24vw,16vh,0) scale(1.12)}100%{transform:translate3d(10vw,40vh,0) scale(.94)}}
@keyframes derive-b{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-26vw,-20vh,0) scale(1.1)}100%{transform:translate3d(-8vw,-42vh,0) scale(.96)}}
.evitement{position:fixed;left:16px;top:-80px;z-index:80;padding:12px 18px;border-radius:999px;background:var(--nuit);color:var(--creme);font-weight:500}
.evitement:focus{top:16px}
.page .titre{color:var(--p-texte);font-size:clamp(38px,4.6vw,64px)}
.page .titre .mince{color:var(--p-accent)}
.page .etiq{color:var(--p-etiq)}
/* la ligne de métier et de lieu, dans le grand titre : petite, en Satoshi, comme les étiquettes */
.page .titre .etiq{font-family:var(--texte);line-height:1.45;text-wrap:balance}
.page .s--nuit .titre,.page .s--noir .titre{color:var(--creme)}
.page .s--nuit .titre .mince,.page .s--noir .titre .mince{color:var(--violet-clair)}
.page .s--nuit .etiq,.page .pied .etiq{color:var(--violet-clair)}
.page .s{background:transparent}
.page .s.s--nuit{background:var(--p-bande);color:var(--creme)}
.page .lien{color:var(--p-accent)}
.page .s--nuit .lien,.page .pied .lien,.page .menu .lien{color:var(--creme)}
.page .btn--violet{--btn-encre:var(--p-texte);--btn-texte-encre:var(--p-fond)}
.page .pied .btn--violet,.page .menu .btn--violet,.page .s--nuit .btn--violet{--btn-encre:var(--creme);--btn-texte-encre:var(--nuit)}
.page .chapeau{color:var(--p-doux)}
.page .s--nuit .chapeau{color:var(--violet-pale)}
button.lien{border:0;background:none;cursor:pointer;color:var(--p-accent)}
.page :focus-visible{outline-color:var(--p-accent)}
/* sur la nuit chaude, l'enveloppe de la carte projet s'éclaircit un peu pour se détacher du fond */
html[data-fond=nuit] .fc-env-dos path{fill:#2E2539}
html[data-fond=nuit] .fc-env-papier{fill:#3A2F47}
html[data-fond=nuit] .fc-env-rabat path{fill:#2B2235}
html[data-fond=nuit] .fc-env-pli{stroke:rgba(243,237,228,.2)}
html[data-fond=nuit] .fc-legende{color:var(--p-note)}

/* l'en-tête de page : le texte à gauche, l'emblème en perles à droite */
.p-tete{padding:clamp(120px,12vw,168px) var(--marge) clamp(40px,5vw,72px)}
.p-tete-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(32px,5vw,80px);align-items:center;max-width:1240px;margin:0 auto}
.p-tete .chapeau{max-width:46ch}
.p-tete .actions{margin-top:32px}
.p-perles{position:relative;aspect-ratio:4/3;width:100%}
.p-perles canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1s var(--sortie)}
.p-perles canvas.pret{opacity:1}
.p-note{margin:18px 0 0;font-size:15px;color:var(--p-note)}

.p-tete + .s,.p-tete + nav + .s{padding-top:clamp(48px,5vw,80px)}

/* le bloc d'appel en fin de page */
.p-appel .p-appel-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 56px;align-items:end;padding:clamp(40px,5vw,64px);border-radius:32px;background:var(--p-carte);box-shadow:0 1px 0 var(--p-reflet) inset,0 30px 60px -40px rgba(42,31,94,.45)}
.p-appel .titre{font-size:clamp(32px,3.6vw,52px)}
.p-appel .chapeau{margin-top:16px}
.p-appel .actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.p-appel .p-suivre{margin:16px 0 0;font-size:15px;line-height:1.5;color:var(--p-note)}
/* un lien au fil d'une phrase reste dans la ligne, sans la marge ni la hauteur des liens seuls (au téléphone, l'étoile de la
   note Google descendait sous la ligne) */
.preuves .lien,.p-suivre .lien,.cx-renseigne .lien,.ex-pied span .lien,.res-liste p .lien{display:inline;min-height:0;padding:0}

/* un site montré comme un site : la fenêtre du navigateur, sa barre claire et ses trois points */
.fenetre{overflow:hidden;border-radius:14px;background:#fff;box-shadow:0 1px 0 var(--p-reflet) inset,0 34px 60px -40px rgba(42,31,94,.65)}
.fenetre-barre{display:flex;align-items:center;gap:6px;height:28px;padding:0 13px;background:#F2EDE5}
.fenetre-barre i{width:8px;height:8px;border-radius:50%;background:#D5CCBE}
.fenetre img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none}

/* l'en-tête d'Expertises : un vrai site, sur ordinateur et sur téléphone */
.p-ecrans{margin:0}
.p-ecrans-cadre{position:relative;padding:0 9% 12% 0}
.p-ecrans .fenetre{rotate:-1deg}
.p-tel{position:absolute;right:0;bottom:0;width:27%;aspect-ratio:9/19;padding:6px;border-radius:26px;background:#0E0A1F;box-shadow:0 34px 50px -26px rgba(14,10,31,.75);rotate:2.5deg}
.p-tel img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:20px}
.p-ecrans figcaption{margin-top:6px;font-size:14.5px;color:var(--p-note)}

/* l'en-tête du Studio : Natacha, en tirage photo, comme sur l'accueil */
.p-portrait{justify-self:center;width:min(100%,400px);margin:0;padding:10px;border-radius:3px;background:#fff;box-shadow:0 2px 0 var(--p-reflet) inset,0 40px 70px -40px rgba(42,31,94,.6);rotate:1.6deg}
.p-portrait img{width:100%;height:auto;border-radius:1px}

.etiq--clair{color:var(--violet-clair)}
.liste-nette{margin:0;padding:0;list-style:none}

/* les preuves, sous le titre d'une page de décision : la note Google, les réalisations, le délai de réponse. Une ligne posée,
   les chiffres en Clash Display, séparés par des filets, l'étoile dessinée. Chaque preuve porte son filet à gauche ; la liste
   recule de la largeur d'un filet et le masque, si bien qu'aucune ligne ne commence par un trait, quel que soit le retour */
.preuves{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 0;margin:22px 0 0 -19px;padding:0;list-style:none;clip-path:inset(-12px -12px -12px 1px);font-size:15px;line-height:1.35;color:var(--p-doux)}
.preuves li{display:inline-flex;align-items:baseline;gap:6px;margin-right:18px;padding-left:18px;border-left:1px solid var(--p-bord-fort)}
.preuves strong{font-family:var(--titre);font-weight:500;font-size:17px;letter-spacing:-.005em;font-variant-numeric:lining-nums tabular-nums;color:var(--p-texte)}
.preuves .etoile{flex:none;align-self:center;width:15px;height:15px;fill:var(--p-accent);stroke:var(--p-accent);stroke-width:1.2;stroke-linejoin:round}

/* un témoignage court, au plus près d'une expertise, d'un projet ou de la carte projet : sous un filet, la phrase du client
   en italique, puis son nom en petites capitales, après un trait */
.temoin{max-width:54ch;margin:30px 0 0;padding:22px 0 0;border-top:1px solid var(--p-bord)}
.temoin blockquote{margin:0;font-style:italic;font-size:17.5px;line-height:1.55;color:var(--p-texte);hanging-punctuation:first;text-wrap:pretty}
.temoin figcaption{display:flex;align-items:flex-start;gap:10px;margin-top:14px;font-size:12.5px;font-weight:700;letter-spacing:.12em;line-height:1.4;text-transform:uppercase;color:var(--p-note)}
/* le trait reste à hauteur de la première ligne, même quand la légende en prend plusieurs */
.temoin figcaption::before{content:"";flex:none;width:22px;height:1px;margin-top:.7em;background:currentColor}
/* la source d'une citation, quand elle a un lien (l'article du Dauphiné) */
.temoin figcaption .lien{display:inline;min-height:0;padding:0;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.temoin figcaption .lien::after{display:none}
@media (hover:hover) and (pointer:fine){ .temoin figcaption .lien:hover{color:var(--p-accent)} }

/* ce que le travail a changé pour des clients : trois colonnes entre deux filets, l'effet en grand, le client, une phrase */
.res-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:48px 0 0;padding:0;list-style:none;border-top:1px solid var(--p-bord)}
.res-liste li{display:flex;flex-direction:column;gap:12px;padding:30px clamp(20px,2.6vw,40px) 6px}
.res-liste li:first-child{padding-left:0}
.res-liste li:last-child{padding-right:0}
.res-liste li + li{border-left:1px solid var(--p-bord)}
.res-chiffre{font-family:var(--titre);font-weight:500;font-size:clamp(26px,2.5vw,36px);line-height:1.06;letter-spacing:-.018em;color:var(--p-texte);text-wrap:balance}
.res-client{font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--p-etiq)}
.res-liste p{margin:4px 0 0;font-size:15.5px;line-height:1.55;color:var(--p-doux);text-wrap:pretty}
.res-note{margin:30px 0 0;font-size:14px;color:var(--p-note)}
/* sur grand écran, les noms des clients et les phrases s'alignent d'une colonne à l'autre */
@supports (grid-template-rows:subgrid){
  @media (min-width:900px){
    .res-liste li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:12px;align-content:start}
    .res-liste li > *{align-self:start}
  }
}
@media (max-width:899px){
  .res-liste{grid-template-columns:1fr;border-top:0}
  .res-liste li,.res-liste li:first-child,.res-liste li:last-child{padding:24px 0 0;border-top:1px solid var(--p-bord)}
  .res-liste li + li{margin-top:30px;border-left:0}
}

/* comment ça se passe : quatre temps posés sur une ligne fine, chacun marqué d'un point et de son numéro en Clash Display
   léger ; la version courte (page Contact) garde la ligne et les points, sans les numéros */
.ccs-liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,2.6vw,40px);margin:48px 0 0;padding:0;list-style:none;counter-reset:ccs}
.ccs-liste li{position:relative;counter-increment:ccs;padding-top:28px;border-top:1px solid var(--p-bord)}
.ccs-liste li::after{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--p-accent)}
.ccs-liste li::before{content:counter(ccs,decimal-leading-zero);display:block;margin-bottom:18px;font-family:var(--titre);font-weight:200;font-size:46px;line-height:.9;letter-spacing:-.02em;font-variant-numeric:lining-nums tabular-nums;color:var(--p-accent)}
.ccs-liste strong{display:block;margin-bottom:8px;font-size:17.5px;line-height:1.3;color:var(--p-texte)}
.ccs-liste p{margin:0;font-size:15.5px;line-height:1.55;color:var(--p-doux);text-wrap:pretty}
.ccs-liste--court{gap:0 22px;max-width:960px;margin-top:30px}
.ccs-liste--court li{padding-top:16px;font-size:15px;line-height:1.45;color:var(--p-doux)}
.ccs-liste--court li::before{display:none}
.ccs-liste--court strong{display:inline;margin:0;font-size:inherit;font-weight:700}
@supports (grid-template-rows:subgrid){
  @media (min-width:900px){
    .ccs-liste:not(.ccs-liste--court) li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
  }
}
@media (max-width:899px){
  .ccs-liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
  .ccs-liste--court{gap:24px 20px}
}
@media (max-width:520px){ .ccs-liste:not(.ccs-liste--court){grid-template-columns:1fr;gap:32px} }

/* les questions fréquentes : une liste entre deux filets ; la croix dessinée devient un trait quand la réponse est ouverte */
.faq-titre{margin:80px 0 0;font-family:var(--titre);font-weight:500;font-size:clamp(24px,2.2vw,30px);line-height:1.15}
.faq{max-width:860px;margin:22px 0 0;border-top:1px solid var(--p-bord)}
.faq details{border-bottom:1px solid var(--p-bord)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:66px;padding:18px 0;font-size:17.5px;font-weight:500;line-height:1.35;color:var(--p-texte);cursor:pointer;list-style:none;transition:color .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:16px;height:16px;color:var(--p-accent);background:linear-gradient(currentColor,currentColor) center/16px 1.5px no-repeat,linear-gradient(currentColor,currentColor) center/1.5px 16px no-repeat;transition:background-size .35s var(--sortie),transform .35s var(--sortie)}
.faq details[open] summary::after{background-size:16px 1.5px,1.5px 0;transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){ .faq summary:hover{color:var(--p-accent)} }
.faq summary:focus-visible{outline:2px solid var(--p-accent);outline-offset:4px;border-radius:4px}
.faq details p{max-width:66ch;margin:0;padding:0 40px 24px 0;font-size:16px;line-height:1.6;color:var(--p-doux);text-wrap:pretty}
@media (prefers-reduced-motion:reduce){ .faq summary,.faq summary::after{transition:none} }

/* les surfaces du navigateur aux couleurs du site : le curseur des champs, une barre de défilement fine */
.page input,.page textarea{caret-color:var(--p-accent)}
html:has(body.page){scrollbar-width:thin;scrollbar-color:rgba(107,78,255,.42) transparent}
.page main p{text-wrap:pretty}

@media (max-width:899px){
  .p-tete{padding-top:56px}
  .p-tete-in{grid-template-columns:1fr}
  .p-perles{order:-1;width:min(62vw,250px);margin:0 auto -4px}
  .p-portrait{order:-1;width:min(50vw,200px);padding:7px;rotate:-1.4deg}
  .p-appel .p-appel-in{grid-template-columns:1fr;padding:32px 24px;border-radius:24px}
  .page .titre{font-size:clamp(32px,9.4vw,48px)}
  .page .actions .lien{display:inline-flex}
}
@media (prefers-reduced-motion:reduce){
  .p-perles canvas{transition:none}
  html[data-fond=creme] .ciel::before,html[data-fond=creme] .ciel::after{animation:none}
}