/* Rappli : coquille publique (en-tête, pied, composants partagés), après la feuille de la page. Historique : docs/design/IDENTITE-V10.md. */

/* 1. Portée, utilitaires, lien d'évitement */
.site-header,.site-footer{--container:var(--rappli-container);--radius-s:10px;--radius-pill:999px;--t-button:15px;--font-sans:var(--rappli-font);--ease:var(--rappli-ease);font-family:var(--rappli-font);color:var(--rappli-ink)}
.site-header *,.site-footer *{box-sizing:border-box}
.site-header [hidden],.site-footer [hidden]{display:none!important}
/* Conteneur commun de l'en-tête et du pied (1 200 px, gouttière, encoche comprise). */
.site-header .wrap,.site-footer .wrap{width:min(var(--rappli-container),100% - 2*max(var(--rappli-gutter),env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)));max-width:none;margin-inline:auto;padding-inline:0}
.icon{display:inline-block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle;flex-shrink:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Mot composé jamais coupé au trait d'union, sans créer de boîte (A9). */
.nowrap{display:contents;white-space:nowrap}
.skip-link{position:fixed;top:8px;left:16px;z-index:var(--rappli-z-skip);padding:12px 20px;border-radius:var(--radius-s,10px);background:var(--rappli-blue);color:var(--rappli-white);transform:translateY(-180%)}
.skip-link:is(:focus,:focus-visible){transform:none;background:var(--rappli-blue);color:var(--rappli-white);outline:var(--rappli-focus-width) solid var(--rappli-navy);outline-offset:2px}

/* 2. En-tête : 80 px (72 px sur téléphone) ; flou sur .site-header, jamais sur .header-inner */
.site-header{position:sticky;top:0;z-index:var(--rappli-z-header);height:auto;min-height:0;padding-top:env(safe-area-inset-top,0px);background:color-mix(in oklch,var(--rappli-white) 94%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid color-mix(in oklch,var(--rappli-line) 65%,transparent);box-shadow:none;transition:box-shadow var(--rappli-state) var(--rappli-ease),border-color var(--rappli-state) var(--rappli-ease)}
.site-header.is-scrolled{background:color-mix(in oklch,var(--rappli-white) 94%,transparent);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom-color:var(--rappli-line);box-shadow:0 10px 24px -18px color-mix(in oklch,var(--rappli-navy) 30%,transparent)}
.site-header .header-inner,.site-header.is-scrolled .header-inner{display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:16px;height:79px;min-height:0;margin-block:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-header .brand{display:inline-flex;align-items:center;flex-shrink:0;width:122px;min-height:44px;margin-inline-end:auto;border-radius:8px}
.site-header .brand img{display:block;width:100%;height:auto}
.site-header .header-actions{display:flex;align-items:center;gap:8px;min-width:0;max-width:none;margin:0}
/* Bouton de l'en-tête (« Commencer » ; « Créer mon espace » sur Partenaires) : bleu plein, 44 px, 14 px. */
.site-header .header-actions .button{min-height:44px;padding:0 16px;border-radius:12px;font-size:14px;font-weight:700;line-height:1.3;letter-spacing:0;white-space:nowrap;max-width:none}
.site-header .header-actions .button .icon{width:16px;height:16px}
/* 24/10/2026, demande du propriétaire (« plus visible, peut-être en bleu ») : bleu des boutons principaux, texte blanc (10,2:1),
   mêmes dimensions ; survol et appui navy (16:1), comme .button-primary ; anneau de focus commun à 2 px. */
.site-header .header-actions .button{border-color:transparent;background:var(--rappli-blue);color:var(--rappli-white);box-shadow:inset 0 1px 0 color-mix(in oklch,var(--rappli-white) 18%,transparent),0 2px 0 color-mix(in oklch,var(--rappli-blue) 76%,var(--rappli-navy)),0 8px 18px -12px color-mix(in oklch,var(--rappli-blue) 55%,transparent)}
@media(hover:hover) and (pointer:fine){
 .site-header .header-actions .button:not(:disabled,[aria-disabled=true]):hover{border-color:transparent;background:var(--rappli-navy);color:var(--rappli-white);transform:translateY(var(--rappli-lift));box-shadow:0 2px 0 var(--rappli-navy),0 10px 22px -12px color-mix(in oklch,var(--rappli-blue) 65%,transparent)}
}
.site-header .header-actions .button:not(:disabled,[aria-disabled=true]):active{background:var(--rappli-navy);color:var(--rappli-white);transform:translateY(var(--rappli-press));transition-duration:var(--rappli-dur-press);box-shadow:0 1px 0 var(--rappli-navy)}
/* Sans oklch() (Safari avant 15.4, Chrome avant 111), les jetons sont invalides : mêmes bleus en sRGB, sinon texte blanc sur en-tête
   blanc et anneau de focus blanc (couleur du texte). */
@supports not (color:oklch(0 0 0)){
 .site-header .header-actions .button{background:#1e3b8b}
 .site-header .header-actions .button:focus-visible{outline:3px solid #1e3b8b}
 .site-header .header-actions .button:not(:disabled,[aria-disabled=true]):active{background:#101f4a}
 @media(hover:hover) and (pointer:fine){
  .site-header .header-actions .button:not(:disabled,[aria-disabled=true]):hover{background:#101f4a}
 }
}
.site-header :is(a,summary):focus-visible{outline:var(--rappli-focus-width) solid var(--rappli-focus-color);outline-offset:2px}
.site-header .brand:focus-visible{outline-offset:4px}
/* Moins de 1 024 px : logo, bouton et « Menu » sur une ligne jusqu'à 320 px. */
@media(max-width:1023px){
 .site-header .header-inner,.site-header.is-scrolled .header-inner{gap:10px}
 .site-header .brand{width:112px}
}
@media(max-width:760px){
 .site-header .header-inner,.site-header.is-scrolled .header-inner{height:71px}
}
/* Partenaires, sous 480 px : « Créer » (data-short) ; le nom accessible reste « Créer mon espace ». */
@media(max-width:479px){
 .site-header .header-cta-long{display:none}
 .site-header [data-short]::before{content:attr(data-short)}
}
@media(max-width:430px){
 .site-header .brand{width:96px}
 .site-header .header-actions .button{padding:0 14px}
 .site-header .header-actions .button .icon{display:none}
}
@media(max-width:360px){
 .site-header .header-inner,.site-header.is-scrolled .header-inner{gap:8px}
 .site-header .brand{width:88px}
 .site-header .header-actions .button{padding:0 12px}
}

/* 3. Pied de page : mise en page Q43, textes de 14 px au moins, cibles de 44 px */
.site-footer{margin:0;padding:var(--rappli-space-7) 0 var(--rappli-space-6);border-top:1px solid var(--rappli-line);background:var(--rappli-white);color:var(--rappli-muted)}
.site-footer>.wrap,.site-footer .footer-brand{display:block}
.site-footer .footer-top{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.5fr);gap:var(--rappli-space-7);align-items:start;justify-content:normal}
.site-footer .footer-brand .brand{display:inline-flex;align-items:center;width:108px;min-height:44px;border-radius:8px}
.site-footer .footer-brand .brand img{display:block;width:100%;height:auto}
.site-footer .footer-brand p{max-width:30ch;margin:var(--rappli-space-4) 0 0;font-size:var(--rappli-fs-small);line-height:1.5;color:var(--rappli-muted)}
.site-footer .footer-columns{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:var(--rappli-space-6);margin:0}
.site-footer .footer-columns nav{display:flex;flex-direction:column;align-items:flex-start}
.site-footer .footer-columns p{margin:0 0 var(--rappli-space-1);font-size:var(--rappli-fs-note);font-weight:800;line-height:1.6;color:var(--rappli-navy)}
.site-footer .footer-columns a{display:flex;align-items:center;min-height:44px;min-width:44px;font-size:var(--rappli-fs-small);font-weight:400;line-height:1.5;color:var(--rappli-ink);text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1px}
.site-footer .footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 var(--rappli-space-5);margin-top:var(--rappli-space-5);padding-top:var(--rappli-space-4);border-top:1px solid var(--rappli-line);font-size:var(--rappli-fs-note);line-height:1.5;color:var(--rappli-muted)}
/* Liens du bas soulignés (même gris que le ©). */
.site-footer .footer-bottom a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;color:var(--rappli-muted);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.site-footer .footer-bottom>span{margin:0}
.site-footer a{transition:color var(--rappli-fast) var(--rappli-ease)}
.site-footer a:focus-visible{outline:var(--rappli-focus-width) solid var(--rappli-focus-color);outline-offset:2px;border-radius:4px}
.site-footer .brand:focus-visible{outline-offset:4px;border-radius:8px}
@media(hover:hover) and (pointer:fine){
 .site-footer .footer-columns a:hover{color:var(--rappli-navy);text-decoration-line:underline}
 .site-footer .footer-bottom a:hover{color:var(--rappli-navy);text-decoration-thickness:2px}
}
@media(max-width:1099px) and (min-width:641px){
 .site-footer .footer-top{grid-template-columns:minmax(0,1fr);gap:var(--rappli-space-6)}
}
@media(max-width:640px){
 .site-footer{padding:40px 0 var(--rappli-space-5)}
 .site-footer .footer-top{grid-template-columns:minmax(0,1fr);gap:var(--rappli-space-5)}
 .site-footer .footer-columns{grid-template-columns:1fr 1fr;gap:var(--rappli-space-5) var(--rappli-space-4)}
 .site-footer .footer-columns nav:first-child{grid-column:1/-1}
}
@media(max-width:360px){
 .site-footer .footer-columns{column-gap:var(--rappli-space-3)}
 .site-footer .footer-bottom{flex-direction:column;align-items:flex-start;gap:var(--rappli-space-1)}
}

/* 4. Boutons (R7) : principal bleu de 56 px (54 px sur téléphone), secondaire en contour ; survol navy et montée */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:1px solid transparent;border-radius:12px;font-family:var(--rappli-font);font-size:15px;font-weight:700;line-height:1.3;letter-spacing:.02em;text-align:center;text-decoration:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color var(--rappli-fast) var(--rappli-ease),border-color var(--rappli-fast) var(--rappli-ease),color var(--rappli-fast) var(--rappli-ease),box-shadow var(--rappli-fast) var(--rappli-ease),transform var(--rappli-fast) var(--rappli-ease)}
.button .icon{width:18px;height:18px;transition:transform var(--rappli-fast) var(--rappli-ease)}
.button-large{min-height:56px;padding:0 28px;border-radius:14px;font-size:16px}
.button-primary{min-height:56px;padding:0 28px;border-color:transparent;border-radius:14px;background:var(--rappli-blue);color:var(--rappli-white);font-size:17px;font-weight:750;box-shadow:inset 0 1px 0 color-mix(in oklch,var(--rappli-white) 18%,transparent),0 4px 0 color-mix(in oklch,var(--rappli-blue) 76%,var(--rappli-navy)),0 10px 24px -12px color-mix(in oklch,var(--rappli-blue) 55%,transparent)}
.button-primary .icon{width:20px;height:20px}
.button-outline{border-color:var(--rappli-line-strong);background:var(--rappli-white);color:var(--rappli-navy);box-shadow:0 2px 3px color-mix(in oklch,var(--rappli-navy) 4%,transparent)}
.button:focus-visible{outline:var(--rappli-focus-width) solid var(--rappli-focus-color);outline-offset:var(--rappli-focus-offset);transform:none}
.button:is(:disabled,[aria-disabled=true]){background:var(--rappli-surface);color:var(--rappli-muted);border-color:var(--rappli-line-strong);box-shadow:none;transform:none;cursor:not-allowed}
@media(hover:hover) and (pointer:fine){
 .button-primary:not(:disabled,[aria-disabled=true]):hover{background:var(--rappli-navy);color:var(--rappli-white);transform:translateY(var(--rappli-lift));box-shadow:0 4px 0 var(--rappli-navy),0 14px 28px -14px color-mix(in oklch,var(--rappli-blue) 65%,transparent)}
 .button-outline:not(:disabled,[aria-disabled=true]):hover{background:var(--rappli-white);border-color:var(--rappli-navy);color:var(--rappli-navy);box-shadow:var(--rappli-shadow-light)}
 .button:not(:disabled,[aria-disabled=true]):hover .icon{transform:translateX(var(--rappli-nudge))}
}
/* Appui après le survol, à la même spécificité : il l'emporte sur un bouton survolé. */
.button:not(:disabled,[aria-disabled=true]):active{transform:translateY(var(--rappli-press));transition-duration:var(--rappli-dur-press)}
.button-primary:not(:disabled,[aria-disabled=true]):active{background:var(--rappli-navy);color:var(--rappli-white);box-shadow:0 1px 0 var(--rappli-navy),0 4px 10px -6px color-mix(in oklch,var(--rappli-blue) 40%,transparent)}
@media(max-width:760px){
 .button-primary,.button-large{min-height:54px}
}
/* Sous 360 px : libellé long sur deux lignes équilibrées, flèche après le dernier mot. */
@media(max-width:360px){
 main .button{display:inline-block;padding-block:15px;text-wrap:balance}
 main .button .icon{display:inline-block;vertical-align:-.2em;margin-block:-4px;margin-left:8px}
}

/* 5. Liens : lien fléché et lien du texte, soulignement au survol */
.text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--rappli-navy);font-size:15px;font-weight:700;line-height:1.4;text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1.5px;transition:color var(--rappli-fast) var(--rappli-ease)}
.text-link .icon{transition:transform var(--rappli-fast) var(--rappli-ease)}
.text-link:focus-visible{outline:var(--rappli-focus-width) solid var(--rappli-focus-color);outline-offset:var(--rappli-focus-offset);border-radius:4px}
/* Lien fléché sur deux lignes : la flèche suit le dernier mot (.text-link-end). */
.text-link--wrap{display:inline;padding-block:12px;text-wrap:balance}
.text-link--wrap .icon{display:inline-block;vertical-align:-.2em;margin-left:8px}
.text-link-end{white-space:nowrap}
@media(hover:hover) and (pointer:fine){
 .text-link:hover{color:var(--rappli-navy);text-decoration-line:underline}
 .text-link:hover .icon{transform:translateX(var(--rappli-nudge))}
 :where(main) :where(p,li,dd,td,figcaption) a:where(:not([class])):hover{text-decoration-line:underline;text-decoration-thickness:2px}
}

/* 6. Composants partagés (rp-*) : pastille de 44 px, survol bordure navy, page courante teintée */
.rp-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border:1px solid var(--rappli-line-strong);border-radius:var(--rappli-radius-pill);background:var(--rappli-white);color:var(--rappli-navy);font-family:var(--rappli-font);font-size:var(--rappli-fs-small);font-weight:650;line-height:1.35;text-decoration:none;cursor:pointer;transition:border-color var(--rappli-fast) var(--rappli-ease),background-color var(--rappli-fast) var(--rappli-ease),transform var(--rappli-fast) var(--rappli-ease)}
.rp-chip:is([aria-current],[aria-pressed=true],[aria-selected=true]){border-color:var(--rappli-navy);background:var(--rappli-surface)}
.rp-chip:focus-visible{outline:var(--rappli-focus-width) solid var(--rappli-focus-color);outline-offset:2px}
.rp-chip:active{transform:translateY(var(--rappli-press));transition-duration:var(--rappli-dur-press)}
@media(hover:hover) and (pointer:fine){
 /* Survol : bordure seule, la pastille courante garde son fond. */
 .rp-chip:hover{border-color:var(--rappli-navy);text-decoration:none} /* jamais soulignée */
}
/* Carte cliquable : un lien étendu à la carte ; survol bordure et ombre, focus sur la carte. */
.rp-card-link{position:relative;border:1px solid var(--rappli-line);border-radius:var(--rappli-radius-card);background:var(--rappli-white);box-shadow:var(--rappli-shadow-light);transition:border-color var(--rappli-state) var(--rappli-ease),box-shadow var(--rappli-state) var(--rappli-ease)}
.rp-card-link__link{color:inherit;text-decoration:none;text-underline-offset:4px;text-decoration-thickness:1.5px}
.rp-card-link__link::after{content:"";position:absolute;inset:0;z-index:var(--rappli-z-raised);border-radius:inherit}
.rp-card-link__link:focus-visible{outline:none}
.rp-card-link:has(.rp-card-link__link:focus-visible){outline:var(--rappli-focus-width) solid var(--rappli-focus-color);outline-offset:var(--rappli-focus-offset)}
@media(hover:hover) and (pointer:fine){
 .rp-card-link:hover{border-color:var(--rappli-line-strong);box-shadow:var(--rappli-shadow-card)}
 .rp-card-link:hover .rp-card-link__link{text-decoration-line:underline}
}
/* Question de FAQ : soulignement au survol, anneau de focus. */
.faq-list summary{cursor:pointer;-webkit-tap-highlight-color:transparent}
.faq-list summary:focus-visible{outline:var(--rappli-focus-width) solid var(--rappli-focus-color);outline-offset:2px;border-radius:6px}
@media(hover:hover) and (pointer:fine){
 .faq-list summary:hover{text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:4px}
}
/* Champs : survol encre, focus bleu et anneau de 3 px, erreur rouge sous le champ. */
:is(.rp-field,.rp-select):focus-visible{border-color:var(--rappli-blue);border-radius:var(--rappli-radius-field);outline:var(--rappli-focus-width) solid var(--rappli-focus-color);outline-offset:2px}
:is(.rp-field,.rp-select)[aria-invalid=true]{border-color:#b42332}
.rp-field-error{margin:6px 0 0;color:#b42332;font-size:var(--rappli-fs-note);font-weight:650;line-height:1.45}
@media(hover:hover) and (pointer:fine){
 :is(.rp-field,.rp-select):not(:disabled,:focus,[aria-invalid=true]):hover{border-color:var(--rappli-ink)}
}
:where(main) :where(input[type=checkbox],input[type=radio]){accent-color:var(--rappli-blue)}

/* 7. Focus commun et marge sous l'en-tête collant */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{outline:var(--rappli-focus-width) solid var(--rappli-focus-color);outline-offset:var(--rappli-focus-offset);scroll-margin-block:104px 24px}

/* 8. Mouvement réduit et contraste forcé */
@media(prefers-reduced-motion:reduce){
 .site-header,.site-footer a,.button,.button .icon,.text-link,.text-link .icon,.rp-chip,.rp-card-link{transition:none}
}
@media(forced-colors:active){
 .site-header{border-bottom-color:CanvasText}
 .button,.rp-chip,.rp-card-link{border:1px solid ButtonText;box-shadow:none}
 .site-header .header-actions .button{border-color:ButtonText;box-shadow:none}
 .site-footer .footer-bottom{border-top-color:CanvasText}
}