/* ==========================================================================
   WautoParc : une identite par famille de pages (inc/identites.php, IDENTITES.md).

   La marque ne change pas : le rouge des actions, l'encre, le papier, les composants. Ce qui change
   d'une famille a l'autre : le fond de la tete de page, son dessin (.wa-sig, un SVG au trait, derriere
   le texte), le trait devant le surtitre, la bande finale sombre, et quelques gestes. La famille est
   sur <body> (wa-f-<famille>) ; la tete produite par wa_page_head porte wa-ph et wa-ph-<famille>.
   Sur un fond de couleur, l'intro et le surtitre prennent une encre plus sombre : le contraste reste
   au-dessus de 4,5 (mesure par essais/reel/identites.sh, sur les couleurs calculees).
   ========================================================================== */

/* --- le socle : le dessin et les ancres ------------------------------------- */
.wa-root .wa-ph{position:relative;isolation:isolate;overflow:hidden}
.wa-root .wa-ph > .wrap{position:relative}
.wa-root .wa-ph .wa-sig{position:absolute;z-index:-1;right:clamp(16px,3.2vw,60px);top:50%;width:clamp(210px,23vw,330px);height:auto;transform:translateY(-50%);color:var(--ink);opacity:.14;pointer-events:none}
.wa-root .wa-ph .wa-sig .wa-sig-rouge{color:var(--red)}
@media (max-width:900.98px){.wa-root .wa-ph .wa-sig{width:128px;top:0;right:4px;transform:none;opacity:.1}}
/* Au telephone, le dessin se tient a droite du surtitre, a sa hauteur, sans croiser une lettre (ux#13) : 80 px de large, le
   surtitre lui reserve sa place (il passe a la ligne plutot que dessous) et le titre commence sous lui. */
@media (max-width:600.98px){.wa-root .wa-ph .wa-sig{width:80px}.wa-root .wa-ph .eyebrow{min-height:40px;padding-right:92px}}
@media (prefers-reduced-motion:no-preference){
	.wa-root .wa-ph .wa-sig{animation:wa-sig-entre .8s cubic-bezier(.23,1,.32,1) both}
	@keyframes wa-sig-entre{from{opacity:0}}
}
/* L'air au-dessus d'une ancre atteinte (accessibilite#24) sert sur toute page : il vit a la fin de
   wautoparc-enrichi.css. Cette feuille ne se charge ni sur l'accueil ni sur la fiche, sans tete de famille. */
/* Sur une tete de couleur, l'intro et le surtitre foncent d'un cran. */
body.wa-f-location .wa-root .wa-page-head .count,body.wa-f-parcs .wa-root .wa-page-head .count,body.wa-f-services .wa-root .wa-page-head .count,body.wa-f-vendre .wa-root .wa-page-head .count,body.wa-f-espace .wa-root .wa-page-head .count{color:#3a3d44;color:oklch(0.36 0.012 265)}
body.wa-f-location .wa-root .wa-page-head .eyebrow,body.wa-f-parcs .wa-root .wa-page-head .eyebrow,body.wa-f-services .wa-root .wa-page-head .eyebrow,body.wa-f-vendre .wa-root .wa-page-head .eyebrow{color:#b00b1a;color:oklch(0.48 0.19 26)}
/* Le fond estompe de l'espace reste a l'espace : ailleurs, la famille parle. */
body:not(.wa-f-espace) .wa-root .wa-page-head.wa-fond::before,body:not(.wa-f-espace) .wa-root .wa-page-head.wa-fond::after{display:none}

/* --- vehicules : la route ------------------------------------------------------
   Le trait du surtitre en pointille, et la route qui passe sous la tete : une bande d'encre et sa
   ligne blanche discontinue. L'inventaire, la recherche, le comparateur, les favoris, les alertes, la 404. */
body.wa-f-vehicules .wa-root .wa-page-head{position:relative;border-bottom:0}
body.wa-f-vehicules .wa-root .wa-page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;pointer-events:none;
	background:repeating-linear-gradient(90deg,rgba(255,255,255,.92) 0 26px,transparent 26px 50px) 0 50%/100% 2px no-repeat,var(--ink)}@supports (color:oklch(0 0 0)){body.wa-f-vehicules .wa-root .wa-page-head::after{background:repeating-linear-gradient(90deg,oklch(1 0 0 / .92) 0 26px,transparent 26px 50px) 0 50%/100% 2px no-repeat,var(--ink)}}
body.wa-f-vehicules .wa-root .wa-page-head .eyebrow::before{background:repeating-linear-gradient(90deg,var(--red) 0 9px,transparent 9px 14px)}
body.wa-f-vehicules .wa-root .wa-ph .wa-sig{opacity:.12}

/* --- location : le voyage --------------------------------------------------------
   Un ciel du matin qui descend vers le papier ; le soleil sur l'horizon et le calendrier. */
body.wa-f-location .wa-root .wa-page-head{background:linear-gradient(180deg,#def4ff 0%,#e9f7fc 58%,var(--paper) 100%)}@supports (color:oklch(0 0 0)){body.wa-f-location .wa-root .wa-page-head{background:linear-gradient(180deg,oklch(0.955 0.028 228) 0%,oklch(0.968 0.016 220) 58%,var(--paper) 100%)}}
body.wa-f-location .wa-root .wa-page-head .eyebrow::before{width:11px;height:11px;border-radius:50%;background:transparent;box-shadow:inset 0 0 0 2.5px currentColor}
body.wa-f-location .wa-root .wa-ph .wa-sig{color:#005575;color:oklch(0.42 0.09 232);opacity:.3}
body.wa-f-location .wa-root .wa-rbande{background:#0a2531;background:oklch(0.25 0.04 232)}

/* --- parcs : le quartier des parcs ------------------------------------------------
   Le sable, le plan en pointille qui monte vers la droite, les epingles et le sceau verifie. */
body.wa-f-parcs .wa-root .wa-page-head{position:relative;isolation:isolate;background-color:#f9f0e3;background-color:oklch(0.958 0.02 78)}
body.wa-f-parcs .wa-root .wa-page-head::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;pointer-events:none;
	background:radial-gradient(rgba(179,154,125,.5) 1.1px,transparent 1.7px) 0 0/16px 16px;background:radial-gradient(oklch(0.7 0.05 70 / .5) 1.1px,transparent 1.7px) 0 0/16px 16px;
	-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 90%);mask-image:linear-gradient(90deg,transparent 40%,#000 90%)}
body.wa-f-parcs .wa-root .wa-page-head .eyebrow::before{width:10px;height:10px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:currentColor}
body.wa-f-parcs .wa-root .wa-ph .wa-sig{color:#623e1c;color:oklch(0.4 0.07 62);opacity:.3}
body.wa-f-parcs .wa-root .wa-rbande{background:#2a1d12;background:oklch(0.245 0.028 62)}

/* --- diaspora : le pont -------------------------------------------------------------
   La nuit bleue entre deux continents : le globe, l'arc en pointille, l'epingle rouge a Conakry.
   Le texte passe en clair ; le rouge s'eclaircit pour tenir son contraste sur le bleu. */
body.wa-f-diaspora .wa-root .wa-page-head{background:radial-gradient(70% 140% at 88% 30%,#1f345c 0%,transparent 72%),#0c1930;background:radial-gradient(70% 140% at 88% 30%,oklch(0.33 0.075 262) 0%,transparent 72%),oklch(0.215 0.05 262);color:#fff;border-bottom:0}
body.wa-f-diaspora .wa-root .wa-page-head h1{color:#fff}
body.wa-f-diaspora .wa-root .wa-page-head h1 em{color:#ff887e;color:oklch(0.76 0.15 26)}
body.wa-f-diaspora .wa-root .wa-page-head .eyebrow{color:#fdb1a9;color:oklch(0.83 0.09 26)}
body.wa-f-diaspora .wa-root .wa-page-head .count{color:#d3d8e0;color:oklch(0.88 0.012 262)}
body.wa-f-diaspora .wa-root .wa-page-head .count a{color:#fff}
body.wa-f-diaspora .wa-root .wa-page-head .eyebrow::before{width:30px;height:11px;background:none;border-top:2px dashed currentColor;border-radius:50% 50% 0 0/100% 100% 0 0}
body.wa-f-diaspora .wa-root .wa-ph .wa-sig{color:#fff;opacity:.3}
body.wa-f-diaspora .wa-root .wa-ph .wa-sig .wa-sig-rouge{color:#ff887e;color:oklch(0.76 0.15 26)}
body.wa-f-diaspora .wa-root .wa-rbande{background:#0c1930;background:oklch(0.215 0.05 262)}

/* --- services : l'atelier -------------------------------------------------------------
   Le papier millimetre du plan, la voiture au trait et ses points de controle numerotes. */
body.wa-f-services .wa-root .wa-page-head{background-color:#f1f6fa;background-color:oklch(0.97 0.008 245);
	background-image:linear-gradient(#d9e5ee 1px,transparent 1px),linear-gradient(90deg,#d9e5ee 1px,transparent 1px);background-image:linear-gradient(oklch(0.915 0.018 245) 1px,transparent 1px),linear-gradient(90deg,oklch(0.915 0.018 245) 1px,transparent 1px);
	background-size:24px 24px;background-position:-1px -1px;border-bottom:1px solid #cdd9e4;border-bottom:1px solid oklch(0.88 0.02 245)}
body.wa-f-services .wa-root .wa-page-head .eyebrow::before{width:12px;height:12px;background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat}
body.wa-f-services .wa-root .wa-ph .wa-sig{color:#1b5687;color:oklch(0.44 0.1 248);opacity:.42}
body.wa-f-services .wa-root .wa-rbande{background:#0f2131;background:oklch(0.24 0.04 248)}

/* --- vendre : le comptoir du vendeur -----------------------------------------------------
   Un souffle de rouge, l'etiquette de prix et la courbe qui monte : vendre, estimer, confier, booster. */
body.wa-f-vendre .wa-root .wa-page-head{background:linear-gradient(180deg,#ffe9e6 0%,#fff2ed 60%,var(--paper) 100%)}@supports (color:oklch(0 0 0)){body.wa-f-vendre .wa-root .wa-page-head{background:linear-gradient(180deg,oklch(0.955 0.03 26) 0%,oklch(0.97 0.016 40) 60%,var(--paper) 100%)}}
body.wa-f-vendre .wa-root .wa-page-head .eyebrow::before{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);background:currentColor}
body.wa-f-vendre .wa-root .wa-ph .wa-sig{color:#7a342f;color:oklch(0.42 0.1 26);opacity:.26}

/* --- boutique : le comptoir de pieces ------------------------------------------------------
   Le blanc net d'un comptoir, le sac, la roue et l'etiquette. */
body.wa-f-boutique .wa-root .wa-page-head{background:#fff;border-bottom:1px solid var(--line)}
body.wa-f-boutique .wa-root .wa-page-head .eyebrow::before{width:10px;height:10px;border-radius:3px;background:currentColor}
body.wa-f-boutique .wa-root .wa-ph .wa-sig{opacity:.12}

/* --- magazine : le journal -------------------------------------------------------------------
   Le papier creme, le double filet de titre, et le titre en caracteres a empattement (ceux du
   systeme : aucune police a telecharger). Les intertitres des articles suivent. */
body.wa-f-magazine .wa-root .wa-page-head{background:#fdfaf3;background:oklch(0.985 0.01 85)}
body.wa-f-magazine .wa-root .wa-page-head > .wrap::before{content:"";display:block;height:5px;border-top:1px solid var(--ink);border-bottom:2px solid var(--ink);margin:0 0 16px}
body.wa-f-magazine .wa-root .wa-page-head h1,
body.wa-f-magazine .wa-root .wa-mag-article h2,
body.wa-f-magazine .wa-root .wa-mag-article h3{font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,"Noto Serif",serif;letter-spacing:-.01em}
body.wa-f-magazine .wa-root .wa-page-head h1{font-weight:700}
body.wa-f-magazine .wa-root .wa-page-head .eyebrow{font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Noto Serif",serif;letter-spacing:.14em}
body.wa-f-magazine .wa-root .wa-page-head .eyebrow::before{width:10px;height:10px;background:currentColor}

/* --- aide : le document ------------------------------------------------------------------------
   La page blanche d'un texte de reference : le filet rouge en marge du titre, le paragraphe (§)
   devant le surtitre, la page pliee et son sceau. Le sommaire suit (assets/js/wa-identites.js). */
body.wa-f-aide .wa-root .wa-page-head{background:#fff;border-bottom:1px solid var(--line)}
body.wa-f-aide .wa-root .wa-page-head h1{padding-left:clamp(12px,1.6vw,20px);border-left:4px solid var(--red)}
body.wa-f-aide .wa-root .wa-page-head .eyebrow::before{content:"\00a7";width:auto;height:auto;background:none;font-size:16px;line-height:1;letter-spacing:0}
body.wa-f-aide .wa-root .wa-ph .wa-sig{opacity:.12}

/* Le sommaire des pages d'aide : ouvert a l'ecran, replie au telephone (details). */
.wa-root .wa-sommaire{margin:0 0 clamp(20px,3vw,32px);border:1px solid var(--line);border-radius:14px;background:#fff;padding:6px 18px 10px}
.wa-root .wa-sommaire > summary{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;list-style:none;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.wa-root .wa-sommaire > summary::-webkit-details-marker{display:none}
.wa-root .wa-sommaire > summary::after{content:"";width:8px;height:8px;margin-left:auto;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.wa-root .wa-sommaire[open] > summary::after{transform:rotate(-135deg)}
.wa-root .wa-sommaire ol{margin:2px 0 6px;padding-left:24px;columns:2 260px;column-gap:36px}
.wa-root .wa-sommaire li{break-inside:avoid;padding:5px 0;font-size:15px;line-height:1.4}
.wa-root .wa-sommaire li::marker{color:var(--red-ink);font-weight:700}
.wa-root .wa-sommaire a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(223,41,46,.45);text-decoration-color:oklch(0.585 0.215 26 / .45);text-underline-offset:3px}
.wa-root .wa-sommaire a:hover,.wa-root .wa-sommaire a:focus-visible{color:var(--red-ink)}
@media (max-width:760.98px){.wa-root .wa-sommaire li{padding:8px 0}}

/* --- rien ne deborde, meme a 320 px ----------------------------------------------
   Le bouton de la suite d'une action (« Obtenir mon code de suivi ») passe a la ligne sur un petit
   telephone au lieu de sortir de sa carte. */
@media (max-width:380px){.wa-root .wa-raction-pied .btn{white-space:normal;text-align:center;max-width:100%}}