/* Motifs optionnels (classes .p-*), CSS pur : aucun script, aucune police ni image externe, aucun backdrop-filter.
   Couleurs = variables des maquettes (--site-*), aucune teinte en dur. Lien charge APRES common.css, seulement par les maquettes qui l'activent.
   Regle commune : contenu visible par defaut ; toute animation est declaree sous (prefers-reduced-motion:no-preference)
   et neutralisee sous (prefers-reduced-motion:reduce) (bloc final). Noms verifies : aucun conflit avec les classes p-hero, p-cta, p-rule, p-foot, p-selec, p-svc, p-ag, p-<page> existantes. */

/* 1. Titre serif avec mot d'accent : <em class="p-em"> = italique + couleur ; <em class="p-emc"> = couleur seule (police sans italique reelle) */
.p-em,.p-emc{color:var(--p-em-color,var(--site-primary))}
.p-em{font-style:italic}
.p-emc{font-style:normal}

/* 2. Voile de lisibilite sur photo : conteneur .p-grad (position:relative), texte .p-onphoto ; voile bas, couleur = texte du modele */
.p-grad{position:relative;isolation:isolate}
.p-grad::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,color-mix(in srgb,var(--site-text) 78%,transparent) 0,color-mix(in srgb,var(--site-text) 38%,transparent) 42%,transparent 72%);pointer-events:none}
.p-onphoto{position:absolute;inset:auto 0 0 0;padding:1.25rem;color:var(--site-bg)}

/* 3. Tracking serre et interligne court sur grands titres (a verifier a 320 px et avec accents) */
.p-tight{letter-spacing:-.03em;line-height:1.04;text-wrap:balance;overflow-wrap:break-word}

/* 4. Etiquette (eyebrow) : un seul par page, texte reel (commune, type de mandat) */
.p-eyebrow{display:inline-block;margin:0 0 .75rem;padding:.25rem .75rem;border:1px solid currentColor;border-radius:999px;color:var(--p-eyebrow-color,var(--site-primary));font:600 .8125rem/1.3 var(--site-font-body);letter-spacing:.12em;text-transform:uppercase}

/* 5. Sections ou etapes numerotees 01 / 02 / 03 : <ol class="p-nums"><li>…</li></ol> ; numero masque aux lecteurs d'ecran (l'ol les numerote deja) */
.p-nums{counter-reset:p-n;list-style:none;margin:0;padding:0}
.p-nums>li{counter-increment:p-n;display:grid;grid-template-columns:3.25rem minmax(0,1fr);gap:.75rem;padding:1.25rem 0;border-top:1px solid var(--p-stroke,var(--site-muted))}
.p-nums>li::before{content:counter(p-n,decimal-leading-zero);content:counter(p-n,decimal-leading-zero) / "";font:400 1.75rem/1 var(--site-font-heading);color:var(--p-num-color,var(--site-primary));font-variant-numeric:lining-nums tabular-nums}

/* 10. Alternance clair / sombre par variables : .p-dark inverse les jetons de la bande, .p-light les rend a la page */
.p-dark{--site-bg:var(--site-primary);--site-surface:color-mix(in srgb,var(--site-on-primary,var(--site-bg)) 10%,var(--site-primary));--site-text:var(--site-on-primary,var(--site-bg));--site-muted:color-mix(in srgb,var(--site-on-primary,var(--site-bg)) 80%,var(--site-primary));--p-stroke:color-mix(in srgb,var(--site-on-primary,var(--site-bg)) 40%,var(--site-primary));background:var(--site-primary);color:var(--site-on-primary,var(--site-bg))}
.p-light{background:var(--site-bg);color:var(--site-text)}

/* 7. Bordure fine 1 px a la place des ombres (cartes, formulaires, fiche) */
.p-line{border:1px solid var(--p-stroke,color-mix(in srgb,var(--site-text) 30%,transparent));box-shadow:none}

/* 12. Carte de bien : bordure fine, image a dimensions fixes ; .p-lift = leger relief au survol (souris seulement) */
.p-card{border:1px solid var(--p-stroke,color-mix(in srgb,var(--site-text) 30%,transparent));border-radius:var(--site-radius);background:var(--site-surface);overflow:hidden}
.p-card img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}

/* 13. FAQ : <details class="p-faq"><summary>…</summary>…</details> (natif, sans script) ; contenu = textes valides, jamais invente */
.p-faq{border-top:1px solid var(--p-stroke,var(--site-muted))}
.p-faq:last-of-type{border-bottom:1px solid var(--p-stroke,var(--site-muted))}
.p-faq>summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0;font-weight:600;cursor:pointer;list-style:none}
.p-faq>summary::-webkit-details-marker{display:none}
.p-faq>summary::after{content:"+";flex:none;font-size:1.5rem;line-height:1}
.p-faq[open]>summary::after{content:"\2212"}
.p-faq>:not(summary){padding:0 0 1rem;max-width:62ch}

/* 6. Navigation en pilule : classe a poser sur le conteneur (.wrap) de l'en-tete ; contour fin par ombre interne (aucune hauteur ajoutee), fond = celui de la page, pas de verre. Non collante (focus jamais masque). Pilule des 56 rem, rectangle sobre en dessous */
@media (min-width:56rem){
.p-nav{padding-inline:1.25rem;border-radius:999px;box-shadow:inset 0 0 0 1px var(--p-stroke,color-mix(in srgb,var(--site-text) 30%,transparent))}
}

/* Animations : toutes hors du chemin par defaut (contenu visible sans support ni preference) */
@keyframes p-rise{from{opacity:0;transform:translateY(1.25rem)}to{opacity:1;transform:none}}
@keyframes p-blur{from{opacity:0;filter:blur(8px);transform:translateY(.5rem)}to{opacity:1;filter:none;transform:none}}

@media (prefers-reduced-motion:no-preference){
/* 3. Entree en fondu echelonnee : enfants directs de .p-stagger, decalage 0,1 s */
.p-stagger>*{animation:p-rise .7s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(var(--p-i,0)*.1s)}
.p-stagger>:nth-child(2){--p-i:1}.p-stagger>:nth-child(3){--p-i:2}.p-stagger>:nth-child(4){--p-i:3}.p-stagger>:nth-child(5){--p-i:4}.p-stagger>:nth-child(6){--p-i:5}.p-stagger>:nth-child(n+7){--p-i:6}
/* 4. Titre mot par mot, flou vers net : <h1 class="p-words"><span>Mot</span> <span>Mot</span>…</h1> (espaces conserves entre les spans), hero seulement */
.p-words>span{display:inline-block;animation:p-blur .8s ease-out backwards;animation-delay:calc(var(--p-w,0)*.08s)}
.p-words>:nth-child(2){--p-w:1}.p-words>:nth-child(3){--p-w:2}.p-words>:nth-child(4){--p-w:3}.p-words>:nth-child(5){--p-w:4}.p-words>:nth-child(6){--p-w:5}.p-words>:nth-child(7){--p-w:6}.p-words>:nth-child(8){--p-w:7}.p-words>:nth-child(9){--p-w:8}.p-words>:nth-child(10){--p-w:9}.p-words>:nth-child(11){--p-w:10}.p-words>:nth-child(n+12){--p-w:11}
/* 12. Relief au survol */
@media (hover:hover){.p-lift{transition:transform .25s ease}.p-lift:hover{transform:translateY(-3px)}}
}

/* 5. Revelation au defilement, CSS seul : navigateurs qui savent lier une animation au defilement ; ailleurs, le bloc est ignore et le contenu reste visible.
   A poser sur des blocs de taille moderne (titres, cartes, lignes), pas sur une section plus haute que l'ecran. */
@supports (animation-timeline:view()){
@media (prefers-reduced-motion:no-preference){
.p-reveal{animation:p-rise linear backwards;animation-timeline:view();animation-range:entry 0% entry 70%}
}
}

/* Preference « reduire les animations » : tout est a l'etat final, rien de cache, rien ne bouge */
@media (prefers-reduced-motion:reduce){
.p-stagger>*,.p-words>span,.p-reveal{animation:none;opacity:1;filter:none;transform:none}
.p-lift,.p-lift:hover{transition:none;transform:none}
}