/* 
 * Styles personnalisés – Christine Plantec Laugier
 * Plugin : plantec
 * Fichier : css/perso.css
 * Rôle : overrides du thème HTML5UP Massively
 */

/* ==========================================================
   01 — VARIABLES (couleurs, typo, timings)
   ========================================================== */

:root {
  /* Base */
  --c-charbon: #14151A;      /* Texte principal, profondeur maximale */
  --c-ivoire: #F6F2E8;       /* Fond “papier”, apporte la lumière */
  --c-azur: #1B4B66;         /* Bleu principal (immersion / contenance) */
  --c-ocre: #B89030;         /* Accent chaleureux (divan / logo) */
  --c-ocre-rgb: 184, 144, 48; /* #B89030 */
  --c-gris-chaud: #D7D2C7;   /* Neutre de structure (bois clair / sol) */
  --c-blanc: #ffffff;
  
  /* Azur – variantes */
  --c-azur-sombre: #0D2A3A;  /* Ombres ou texte sur fond bleu */
  --c-azur-clair: #326A8A;   /* Icônes ou fonds de section plus légers */
  --c-bleu-pop: #0057FF;
  
  
  /* Ocre – variantes */
  --c-ocre-vibrant: #D4AC54; /* Survol / focus boutons */
  --c-ocre-doux: #E6D5B3;    /* Fonds discrets / cadres */
  
  /* Ivoire / Charbon – variantes */
  --c-ivoire-ombre: #EBE5D8; /* Relief léger sur le fond ivoire */
  --c-charbon-doux: #3B3D42; /* Texte secondaire */
  
  /* Variantes utiles */
  --c-texte-principal: var(--c-charbon);
  --c-texte-secondaire: var(--c-charbon-doux);
  --c-fond-principal: var(--c-ivoire);
  --c-fond-surface: var(--c-ivoire-ombre);     /* cartes, encarts */
  --c-fond-alt: var(--c-gris-chaud);           /* sections alternées (si assez contrasté) */
  --c-accent: var(--c-ocre);
  --c-accent-hover: var(--c-ocre-vibrant);
  --c-lien: var(--c-ocre);
  --c-lien-hover: var(--c-charbon);
  --c-bordure: var(--c-gris-chaud);
  --c-azur-base: var(--c-azur);
  --c-azur-ombre: var(--c-azur-sombre);
  
    /* Typographie */
  --ff-texte: "Spectral", Georgia, serif;
  --ff-titres: "Noto Sans Display Var", Helvetica, Arial, sans-serif;
  --ff-ui: "Roboto Condensed", "Noto Sans Display Var", Helvetica, Arial, sans-serif;
  --ff-parenthese: "Open Sans", Helvetica, sans-serif;
  
  --fw-texte: 400;
  --fw-titres: 600;
  --fw-titres-fin: 300;
  --fw-ui: 400;
  
  --tt-titres: none;
  --ls-titres: 0.02em;
  
  /* Timings */
  --bg-reveal: .75s;
  
  --nav-btn: 3rem;
  --nav-top: 1rem;
  --nav-right: 1rem;
  --nav-left: 1rem;
  --nav-gap: .75rem;
}
@media screen and (max-width: 736px) {
:root {
  --nav-top: 0.6rem;
  }
}
 
 
/* ==========================================================
	02 — BASE (fonds, texte, wrapper)
	========================================================== */

 
html,
body {
 background-color: var(--c-fond-principal);
}

body,
#wrapper.fade-in,
#wrapper > .bg {
 background-color: var(--c-fond-principal);
 color: var(--c-texte-principal);
}

/* Zone principale (articles, contenu) */
#main {
 background-color: var(--c-blanc);
 border-top-left-radius: 1.25rem;
 border-top-right-radius: 1.25rem;
 overflow: hidden; 
}
  
/* Sticky footer sans position:fixed */
html, body{
	height: 100%;
}
body{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
/* Massively : wrapper principal */
#wrapper {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;  /* Couche page : au-dessus du curseur voir cursor 06 */ 
}

 
 /* ==========================================================
	03 — TYPOGRAPHIE (application)
	========================================================== */
 
 body, input, select, textarea{
   font-family: var(--ff-texte);
   font-weight: var(--fw-texte);
 }
 
 h1,h2,h3,h4,h5,h6{
   font-family: var(--ff-titres);
   font-weight: var(--fw-titres);
   text-transform: var(--tt-titres);
   letter-spacing: var(--ls-titres);
 }
 
 
 /* ==========================================================
	04 — LIENS / BOUTONS / FORMULAIRES
	========================================================== */
 
 /* Couleur de base des titres et liens "normaux" */
 a,
 #footer input[type="submit"],
 h1, h2, h3, h4, h5, h6,
 #nav ul.links li.active a {
   color: var(--c-texte-principal);
 }
 
 /* Filets, bordures neutres */
 hr,
 input[type="checkbox"] + label::before,
 input[type="radio"] + label::before {
   border-color: var(--c-gris-chaud) !important;
 }
 
 /* HOVER / accents en or */
 a:hover,
 a:active,
 a:focus,
 a.on,
 .formulaire_contact form > fieldset.previsu > legend,
 #nav ul.links li.active a:hover,
 #intro input[type="reset"]:hover,
 #intro input[type="button"]:hover,
 #intro button:hover,
 #intro .button:hover,
 input[type="submit"]:hover,
 input[type="reset"]:hover,
 input[type="button"]:hover,
 button:hover,
 .button:hover,
 #footer input[type="submit"]:hover,
 #footer input[type="reset"]:hover,
 #footer input[type="button"]:hover,
 #footer button:hover,
 #footer .button:hover,
 #footer a:hover,
 .pagination a:hover,
 #nav a:hover,
 #header .logo:hover,
 #copyright a:hover,
 .reponse_formulaire_erreur,
 .erreur_message,
 #nav ul.links li a:hover,
 #sousnav nav ul li a.active,
 #sousnavmasquee nav ul li a.active {
   color: var(--c-lien) !important;
 }
 
 /* Hover icônes (Font Awesome) : compat :before / ::before */
#footer ul.icons li a.icon:hover:before,
 #footer ul.icons li a.icon:hover::before,
 #nav ul.icons li a.icon:hover:before,
 #nav ul.icons li a.icon:hover::before,
 ul.icons li a.icon:hover:before,
 ul.icons li a.icon:hover::before {
   color: var(--c-lien-hover) !important;
 }
 
 /* Bouton primary : texte blanc sur fond or au survol */
 .button.primary:hover,
 input[type="submit"].primary:hover,
 input[type="reset"].primary:hover,
 input[type="button"].primary:hover,
 button.primary:hover {
   color: var(--c-blanc) !important;
 }
 
 /* Hover : contour doré (box-shadow) */
 #intro input[type="submit"]:hover,
 #intro input[type="reset"]:hover,
 #intro input[type="button"]:hover,
 #intro button:hover,
 #intro .button:hover,
 input[type="submit"]:hover,
 input[type="reset"]:hover,
 input[type="button"]:hover,
 button:hover,
 .button:hover,
 #footer input[type="submit"]:hover,
 #footer input[type="reset"]:hover,
 #footer input[type="button"]:hover,
 #footer button:hover,
 #footer .button:hover,
 #footer ul.icons.alt li a.icon:hover::before,
 #footer ul.icons.alt li a.icon:hover:before,
 ul.icons.alt li a.icon:hover:before,
 ul.icons.alt li a.icon:hover::before {
   box-shadow: inset 0 0 0 2px var(--c-accent);
 }
 
 /* Bordures focus en or */
 .pagination a:hover,
 #header .logo:hover,
 #footer input[type="text"]:focus,
 #footer input[type="password"]:focus,
 #footer input[type="email"]:focus,
 #footer select:focus,
 #footer textarea:focus {
   border-color: var(--c-accent) !important;
 }
 
 /* Footer : fond plus sombre, texte clair */
 #footer {
   background-color: var(--c-texte-principal);
 }
 
 #footer,
 #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6,
 #footer input,
 #footer select,
 #footer textarea,
 #footer label,
 #footer strong,
 #footer b {
   color: var(--c-ivoire);
 }
 
 /* Copyright */
 #copyright,
 #copyright a {
   color: var(--c-gris-chaud);
 }
 
 /* Textareas : resize uniquement en hauteur (évite les débordements en largeur) */
 #main .formulaire_spip textarea,
 #main form textarea{
   resize: vertical;
   max-width: 100%;
   box-sizing: border-box;
 }

 /* ==========================================================
	05 — MENU (navPanelToggle)
	========================================================== */

  
/* NAV / UI (menu, boutons, éléments d’interface) */
#nav a,
#navPanel a,
#navPanelToggle,
#navPhone,
#navRdv,
button, .button,
input[type="submit"], input[type="reset"], input[type="button"]{
  font-family: var(--ff-ui);
  font-weight: var(--fw-ui);
  text-transform: none;    /* menu sans majuscules */
  letter-spacing: 0.02em;
}

/* ===== Boutons fixed (hamburger + téléphone) : mêmes dimensions, mêmes règles ===== */
#navPanelToggle,
#navPhone,
#navRdv{
  display: flex;                 /* centrage réel */
  align-items: center;
  justify-content: center;

  position: fixed;
  top: var(--nav-top);
  width: var(--nav-btn);
  height: var(--nav-btn);

  padding: 0;
  border-bottom: 0;
  text-decoration: none;

  font-size: 0;                  /* cache le texte “Menu” si présent */
  color: var(--c-blanc);
  opacity: .9;

  /* carré (hit-area propre) */
  border-radius: 0;
}

/* Positions */
#navPanelToggle{ 
  right: var(--nav-right); 
}

#navPhone{
  right: calc(var(--nav-right) + var(--nav-btn) + var(--nav-gap));
}

#navRdv{
  right: calc(var(--nav-right) + (var(--nav-btn) * 2) + (var(--nav-gap) * 2));
}
  
/* Icônes Font Awesome : neutralise le “décalage” vertical du thème */

#navPanelToggle::before,
#navPhone::before,
#navRdv::before{
  margin: 0;
  display: block;
  line-height: 1;                /* IMPORTANT : stoppe le flottement */
  font-size: 1.8rem;
  color: var(--c-blanc);
  transition: transform .2s ease, opacity .2s ease, color .2s ease;
}
#navPhone::before {
  font-size: 1.6rem;
}
#navRdv::before {
  font-size: 1.55rem;
}

/* Hover / focus : même effet */
#navPanelToggle:hover::before,
#navPanelToggle:focus-visible::before,
#navPhone:hover::before,
#navPhone:focus-visible::before,
#navRdv:hover::before,
#navRdv:focus-visible::before{
  transform: scale(1.15);
  opacity: .8;
  color: var(--c-lien-hover);
}

/* Accessibilité : focus visible discret */
#navPanelToggle:focus-visible,
#navPhone:focus-visible,
#navRdv:focus-visible{
  outline: 2px solid rgba(var(--c-ocre-rgb), .55);
  outline-offset: 3px;
}

/* Icone lisible sur fond clair */
#navPhone.is-solid::before,
#navRdv.is-solid::before,
#navPanelToggle.is-solid::before {
  color: var(--c-azur) !important;
}

/* Bandeau global au scroll, dans la même pile que les boutons */
#wrapper::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-top) + var(--nav-btn));
  background: rgba(255, 255, 255, 0.68);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 10000;
}

body.has-solid-nav #wrapper::before {
  opacity: 1;
}

@media screen and (max-width: 736px) {
  #navPanelToggle,
  #navPhone,
  #navRdv {
    top: var(--nav-top);
  }
}

/* ==========================================================
 05bis — NAVPANEL (menu off-canvas pour tous les écrans)
 ========================================================== */
 
/* On désactive le menu desktop et on force le navPanel partout */
#nav { display: none !important; }
#navPanelToggle { display: flex !important; }
#navPanel { display: block !important; }

/* Panel : existe sur tous les écrans, mais invisible tant qu'il est fermé */
#navPanel {
 transform: translateX(20rem);
 transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
 display: block;
 -webkit-overflow-scrolling: touch;

 background: var(--c-fond-principal);
 color: var(--c-texte-principal);

 box-shadow: none;
 height: 100%;
 max-width: 80%;
 overflow-y: auto;
 padding: 3rem 2rem;
 position: fixed;
 right: 0;
 top: 0;
 visibility: hidden;
 width: 20rem;
 z-index: 10002;
}

#navPanel .nav-panel-brand {
  margin: 0 0 1.25rem 0;
  padding: 0 0 1rem 0;
}

#navPanel .nav-panel-brand h2 {
  margin: 0;
  font-family: var(--ff-titres);
  font-size: 1.18rem;
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.15;
  text-transform: lowercase;
  color: var(--c-azur);
}

/* Liste */
#navPanel .links {
 list-style: none;
 margin: 0;
 padding: 0;
}

#navPanel .links li {
 border-top: 1px solid rgba(20, 21, 26, 0.12);
 margin: 0;
 padding: 0;
}

#navPanel .links li:first-child {
 border-top: 1px solid rgba(20, 21, 26, 0.12);
}

#navPanel .links li:last-child {
  border-bottom: 1px solid rgba(20, 21, 26, 0.12);
}

/* Liens du menu */
#navPanel .links li a {
 display: flex;
 align-items: center;
 gap: 0.75rem;

 min-height: 3.35rem;
 padding: 0.8rem 0;

 border-bottom: 0;
 text-decoration: none;

 font-family: var(--ff-ui);
 font-size: 1.02rem;
 font-weight: 500;
 letter-spacing: 0.01em;
 line-height: 1.15;
 text-transform: lowercase;
 color: var(--c-texte-principal);
}

#navPanel .links li a {
  position: relative;
}

#navPanel .links li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 40px;
  transform: translateY(-50%) scale(1);
  border-radius: 999px;

  background: transparent;
  box-shadow: inset 0 0 0 0 rgba(var(--c-ocre-rgb), 0);

  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

#navPanel .links li a:hover,
#navPanel .links li a:focus {
 color: var(--c-lien);
}

/* Icônes des entrées */
#navPanel .links li a .nav-icon,
#navPanel .links li a img {
  display: block;
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 24px;

  opacity: 0.74;
  padding: 8px;
  box-sizing: content-box;
  border-radius: 0;

  background: transparent;
  box-shadow: none;

  position: relative;
  z-index: 1;

  transform: rotate(0deg);
  transform-origin: center center;
  transition:
    opacity 0.2s ease,
    transform 0.38s cubic-bezier(.2,.75,.2,1);
}

#navPanel .links li.active a .nav-icon,
#navPanel .links li.active a img {
  opacity: 1;
  transform: rotate(0deg);
}

#navPanel .links li a:hover .nav-icon,
#navPanel .links li a:hover img,
#navPanel .links li a:focus .nav-icon,
#navPanel .links li a:focus img {
  opacity: 1;
  transform: rotate(55deg);
}
#navPanel .links li.active a::before,
#navPanel .links li a:hover::before,
#navPanel .links li a:focus::before {
  background-color: rgba(var(--c-ocre-rgb), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--c-ocre-rgb), 0.22);
}

/* Label texte */
#navPanel .links li a .nav-label {
 display: block;
 flex: 1 1 auto;
 min-width: 0;
}

/* Neutralise le hover global du site dans le navPanel */
#navPanel a:not(.button):not(.icon):hover,
#navPanel a:not(.button):not(.icon):focus {
 transform: none;
 text-shadow: none;
}

/* Réseaux du navPanel : même logique de boîte que les logos navigation */
#navPanel .icons {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0 0 0;
  padding: 0;
  padding-left: 6px; /* alignement optique avec la colonne des logos navigation */
}

#navPanel .icons li,
#navPanel .icons.alt li {
  border-top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Le cercle est porté uniquement par l’ancre */
#navPanel .icons a.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;
  flex: 0 0 40px;

  border-bottom: 0;
  text-decoration: none;
  border-radius: 999px;

  color: var(--c-texte-principal);
  opacity: 0.74;

  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(var(--c-ocre-rgb), 0.22);

  transition:
    opacity 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* On neutralise totalement la boîte héritée du thème */
#navPanel .icons a.icon::before,
#navPanel .icons a.icon:before {
  display: block;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  font-size: 25px;
  line-height: 1;
  text-align: center;

  box-shadow: none !important;
  border-radius: 0 !important;
  background: none !important;
}

/* Hover / focus */
#navPanel .icons a.icon:hover,
#navPanel .icons a.icon:focus-visible {
  opacity: 1;
  color: var(--c-lien);
  background-color: rgba(var(--c-ocre-rgb), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--c-ocre-rgb), 0.22);
  transform: scale(1.04);
}

#navPanel .icons a.icon:focus {
  outline: none;
}

/* Bouton de fermeture */
#navPanel .close {
 text-decoration: none;
 transition: color 0.2s ease-in-out;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 border: 0;
 color: var(--c-texte-secondaire);
 cursor: pointer;
 display: block;
 height: 3.25rem;
 line-height: 3.25rem;
 padding-right: 1.25rem;
 position: absolute;
 right: 0;
 text-align: right;
 top: 0;
 vertical-align: middle;
 width: 7rem;
}

#navPanel .close:before {
 font-family: 'Font Awesome 5 Free';
 font-weight: 900;
 content: '\f00d';
 font-size: 1.25rem;
 line-height: 1;
}

#navPanel .close:hover {
 color: var(--c-texte-principal);
}

/* Sur ce site, pas de cartouche blanc derrière le hamburger */
#navPanelToggle.alt,
#navPanelToggle {
  background: transparent !important;
  box-shadow: none !important;
}

/* même logique au survol / focus */
#navPanelToggle.alt:hover,
#navPanelToggle.alt:focus-visible,
#navPanelToggle:hover,
#navPanelToggle:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}

/* État ouvert */
body.is-navPanel-visible #wrapper {
 opacity: 0.5;
}

body.is-navPanel-visible #navPanel {
 transform: translateX(0);
 box-shadow: 0 0 1.5rem 0 rgba(0, 0, 0, 0.2);
 visibility: visible;
}

/* Ajustements petits écrans */
@media screen and (max-width: 736px) {
 #navPanel {
   padding: 2.5rem 1.75rem;
 }

 #navPanel .close {
   height: 4rem;
   line-height: 4rem;
 }
}


/* ==========================================================
  06 — CURSEUR (z-index + hover)
  ========================================================== */

 /* Par défaut : curseur normal */
 body {
   cursor: auto;
 }

 
 /* Couche UI : toujours au-dessus */
/* Couche UI : au-dessus */
 #navPanel { z-index: 10002; }
 #navPanelToggle,
 #navPhone,
 #navRdv { z-index: 10001; }
 
 /* Curseur custom */
 #plantec-cursor {
   position: fixed;
   top: 0;
   left: 0;
   width: 18px;
   height: 18px;
   border-radius: 50%;
   pointer-events: none;
   z-index: 0;
 
   background-color: var(--c-accent);
   mix-blend-mode: normal;
 
   transform: translate(-50%, -50%);
   transition:
	 width 0.18s ease,
	 height 0.18s ease,
	 background-color 0.18s ease,
	 opacity 0.18s ease;
 
   opacity: 0; /* caché tant qu’on n’a pas bougé la souris */
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
 #plantec-cursor .plantec-cursor-label {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
   font-size: 10px;
   letter-spacing: 0.05em;
   text-transform: uppercase;
   color: var(--c-texte-principal);
   opacity: 0;
   transition: opacity 0.15s ease;
 }
 
 /* Quand la souris est sur un lien / élément interactif */
 #plantec-cursor.is-active {
   width: 56px;
   height: 56px;
   background-color: var(--c-accent);
 }
 
 #plantec-cursor.is-active .plantec-cursor-label {
   opacity: 1;
 }
 
 /* Liens textuels : léger grossissement + filet doré subtil */
  #wrapper a:not(.button):not(.icon) {
	transition:
	  transform 0.16s ease-out,
	  color 0.16s ease-out,
	  text-shadow 0.16s ease-out;
  }
  
  #wrapper a:not(.button):not(.icon):hover,
  #wrapper a:not(.button):not(.icon):focus {
	color: var(--c-texte-principal);              /* reste charbon */
	transform: scale(1.03);                       /* léger grossissement */
	text-shadow: 0 0 0.5px var(--c-accent);       /* “filet” doré autour des lettres */
  }
 
/* Curseur custom : désactivé uniquement sur appareils tactiles */
@media (hover: none) and (pointer: coarse) {
  #plantec-cursor { display: none; }
  body { cursor: auto; }
}
 
/* ==========================================================
07 — HEADER INNER (identité pages intérieures)
- aligné à gauche sur le bloc blanc
- hauteur réduite
- calage vertical propre
- légère animation
========================================================== */

#header.header-inner {
  position: relative;
  display: flex !important;
  flex-direction: column;
  justify-content: center !important;   /* centre verticalement dans la zone */
  align-items: flex-start !important;   /* plus de centrage horizontal */

  width: calc(100% - 4rem);
  max-width: 72rem;
  height: 20rem;
  margin: 0 auto;
  padding: 0 !important;    /* petit appui au-dessus du bloc blanc */

  text-align: left !important;
  pointer-events: none;
  user-select: none;
  z-index: 2;
}

/* neutralisation totale du .logo de Massively */
#header.header-inner .logo,
#header.header-inner a.logo,
#header.header-inner a.logo.site-title,
#header.header-inner a.logo.site-title.intro-title {
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;

  pointer-events: auto;
  user-select: auto;

  font-family: var(--ff-titres) !important;
  font-weight: var(--fw-titres-fin) !important;
  font-size: clamp(1.9rem, 2.7vw, 3rem) !important;
  line-height: 1.02 !important;
  letter-spacing: var(--ls-titres) !important;
  text-transform: lowercase !important;
  color: var(--c-blanc) !important;

  opacity: 0;
  transform: translateY(10px);
  animation: headerInnerFade 0.9s ease-out forwards;
}



@keyframes headerInnerFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* aucun effet gadget */
#header.header-inner .logo:hover,
#header.header-inner a.logo:hover,
#header.header-inner a.logo.site-title:hover,
#header.header-inner a.logo.site-title:focus-visible,
#header.header-inner a.logo.site-title.intro-title:hover,
#header.header-inner a.logo.site-title.intro-title:focus-visible {
  color: var(--c-blanc) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  transform: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  outline: none !important;
}

/* mobile */
@media screen and (max-width: 736px) {
  #header.header-inner {
    width: calc(100% - 2rem);
    height: 7.75rem;
    justify-content: flex-start !important;
    padding: calc(var(--nav-top) + var(--nav-btn)) 0 0 0 !important;
  }

  #header.header-inner .logo,
  #header.header-inner a.logo,
  #header.header-inner a.logo.site-title,
  #header.header-inner a.logo.site-title.intro-title {
    font-size: 2rem !important;
    line-height: 1.04 !important;
  }

}
  
/* ==========================================================
08 — ACCUEIL (intro animations)
========================================================== */

body.page_sommaire {
  --intro-y: 32vh;      /* hauteur du bloc (old 35) */
  --intro-x: clamp(1.5rem, 3vw, 4rem); /* marge gauche */
  --intro-max: 980px;   /* largeur max du bloc */
  
  --title-word-delay: .05s;    /* délai avant le 1er mot */
  --title-stagger: .55s;       /* écart entre les mots */
  --title-word-dur: .9s;      /* durée d’animation d’un mot */
  --title-word-shift: 140px;   /* distance d’arrivée depuis la gauche */
  --title-end: calc(
  var(--title-word-delay) + (var(--title-stagger) * 2) + var(--title-word-dur)
  );	/* Timing calculé : fin du titre (3e mot) */
  --rule-delay: calc(var(--title-end) + .15s);	/* Filet : démarre juste après le titre */
  
  /* logo */
  /*--logo-h: clamp(6rem, 10vw, 9rem); */   
  --logo-h: clamp(5.6rem, 9vw, 8.2rem); /* taille réelle du logo */
  /*--logo-gap: clamp(1.8rem, 3vh, 2.6rem);*/                    
  --logo-gap: calc((var(--intro-y) - var(--logo-h)) / 2); /* espace entre logo et titre */
  --logo-slot: calc(var(--logo-h) + var(--logo-gap)); /* slot = logo + gap */
  --logo-offset-x: .4rem;                /* micro marge optique */
  --logo-reveal-dur: calc(var(--rule-delay) + 4.35s); /* finit après slogan */
}

/* zone intro */
body.page_sommaire #intro.intro-home {
  position: absolute;
  inset: 0;
  padding: 0;
  min-height: 0;
  display: block;
}

body.page_sommaire #intro.intro-home .intro-wrap {
  position: absolute;
  top: var(--intro-y);
  left: var(--intro-x);
  /*transform: translateY(-50%);*/
  width: fit-content;
  max-width: calc(100% - 3rem);
  text-align: left;
  overflow: visible;
}


/* ===== ACCUEIL — Logo dans l’intro (au-dessus du titre) ===== */
body.page_sommaire #intro.intro-home .intro-logo{
  position: absolute;
  /* OLD quand logo dans intro-wrap
  left: var(--logo-offset-x);
  top: calc(-1 * (var(--logo-h) + var(--logo-gap)));*/
  /* Centre verticalement le logo entre le haut de la fenêtre
     et la ligne de base du bloc texte (#intro-wrap à --intro-y) */
  left: var(--intro-x);
  top: calc((var(--intro-y) - var(--logo-h)) / 2);
  
  height: var(--logo-h);
  z-index: 5;
  
  display: block;
  border-bottom: 0;
  text-decoration: none;
  
  opacity: 0;
  transform: translateY(12px) scale(.6);
  filter: saturate(.92) contrast(.92);
  
  animation: introLogoPresence var(--logo-reveal-dur) ease-out forwards;
  will-change: opacity, transform, filter;  
}

body.page_sommaire #intro.intro-home .intro-logo img{
  display: block;
  height: var(--logo-h);
  width: auto;
  margin-left: 0; 
}
 
/* TITRE : temps 1 - arrive de la gauche, finit centré  */
body.page_sommaire #intro .intro-title{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35em; /* espace entre les mots */
  font-size: clamp(2.2rem, 3.2vw, 3rem); /* old 2.2rem, 3.6vw, 3.4rem */
  line-height: 1.05;
  font-weight: var(--fw-titres-fin);
  text-transform: lowercase;
  margin: 0;
}
 
/* FILET : temps 2 (calé sur le fond) */
body.page_sommaire #intro .intro-rule{
 width: 100%; /*old: 92%;*/
 height: 2px;
 /*margin: 1.1rem 0 .75rem auto;*/
 margin: 0.6rem 0 .35rem auto;
 background: var(--c-blanc);
 opacity: 0;
 transform: scaleX(0);
 transform-origin: right;
 animation: introRuleDesktop 4s ease-out forwards; /* old 3s */
 animation-delay: var(--rule-delay);
 filter: drop-shadow(0 1px 6px rgba(0,0,0,.18)); /* optionnel mais efficace */
}

/* SOUS-TITRE : temps 2 (calé sur le fond) */
body.page_sommaire #intro .intro-subtitle{
  font-family: var(--ff-titres);
  font-weight: 300; 
  font-size: clamp(1.3rem, 1.9vw, 2rem);
  text-transform: lowercase;
  /*font-size: clamp(1.15rem, 1.3vw, 1.85rem);*/
  font-style: normal;
  line-height: 1.35;
  width: 100%;
  
  display: block;
  margin: 0 0 0 auto;
  text-align: right;
  
  opacity: 0;
  transform: translateY(10px);
  animation: introSubDesktop 4s cubic-bezier(.2,.9,.2,1) forwards;
  animation-delay: calc(var(--rule-delay) + .35s);
  
  will-change: transform, opacity;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);

}
 
body.page_sommaire #intro .intro-title span {
   display: inline-block;
   opacity: 0;
   transform: translateX(calc(-1 * var(--title-word-shift)));
   animation: introWordIn var(--title-word-dur) ease-out forwards;
   will-change: transform, opacity;
 }
 
 /* Délais mot par mot */
 body.page_sommaire #intro .intro-title span:nth-child(1) {
   animation-delay: var(--title-word-delay);
 }
 body.page_sommaire #intro .intro-title span:nth-child(2) {
   animation-delay: calc(var(--title-word-delay) + var(--title-stagger));
 }
 body.page_sommaire #intro .intro-title span:nth-child(3) {
   animation-delay: calc(var(--title-word-delay) + (var(--title-stagger) * 2));
 }

 
/* ===== Sur téléphone : titre en 3 lignes ===== */
@media (max-width: 480px) {

  body.page_sommaire #intro.intro-home .intro-wrap {
    text-align: left;
    width: 100%;
  }
  
  body.page_sommaire #intro .intro-title {
    display: block;
  }
  
  body.page_sommaire #intro .intro-title span {
    display: block;
  }
  
  body.page_sommaire #intro .intro-rule {
    animation-name: introRuleMobile;
    width: 100%;
    height: 2px;
    /*margin: 1.1rem 0 .75rem 0;*/
    margin: 0.6rem 0 .35rem auto;
  }
  
  body.page_sommaire #intro .intro-subtitle {
    font-size: clamp(1.3rem, 4.2vw, 1.55rem);
    max-width: 20ch;      /* force une casse typographique plus naturelle */
    text-wrap: balance;   /* si supporté : répartit mieux les lignes */
    animation-name: introSubMobile;
  }
	

}
/* ===== Desktop : mots 2–3 en fade+up, mot 1 en slide-in ===== */
@media (min-width: 481px) {
	/* Par défaut (mots 2 et 3) : fade + légère montée */
	body.page_sommaire #intro .intro-title span {
	transform: translateY(10px);
	animation-name: introWordUp;
	}
	/* Mot 1 : conserve l'arrivée depuis la gauche */
	body.page_sommaire #intro .intro-title span:nth-child(1) {
	transform: translateX(calc(-1 * var(--title-word-shift)));
	animation-name: introWordInX;
	}
}	

/* NOUVEAU : à partir de 980px, on déplace le bloc vers le centre */
@media (min-width: 980px) {

  body.page_sommaire #intro.intro-home .intro-wrap {
    transform: translateX(-100%);   /* on décale d’une largeur vers la gauche */
    left: 52%;    /* bord droit ≈ milieu de l’écran */
  }
}

/* ===== Accessibilité : désactive animations si “reduced motion” ===== */
@media (prefers-reduced-motion: reduce){
   body.page_sommaire #intro .intro-title,
   body.page_sommaire #intro .intro-title span,
   body.page_sommaire #intro .intro-subtitle,
   body.page_sommaire #intro .intro-rule{
	 animation: none !important;
	 opacity: 1 !important;
	 transform: none !important;
   }
 }
 
/* ===== Sécurité : fenêtre très basse — intro en flux normal + logo propre ===== */
 @media (max-height: 450px) {
 
   /* On réduit un peu le logo en hauteur basse (sinon il colle le haut) */
   body.page_sommaire{
     --logo-h: clamp(5rem, 16vh, 7rem);
     --logo-gap: 1rem;
     --logo-slot: calc(var(--logo-h) + var(--logo-gap));
   }
 
   body.page_sommaire #intro.intro-home{
     position: relative;
     inset: auto;
     padding: 6rem 2rem 2rem;
   }
 
   body.page_sommaire #intro.intro-home .intro-wrap{
     position: relative;
     top: auto;
     left: auto;
     transform: none;
     width: min(920px, calc(100% - 2rem));
 
     /* Place réservée au logo AU-DESSUS du titre */
     padding-top: var(--logo-slot);
   }
 
   /* Logo : on stoppe le “top négatif” et on le met dans la place réservée */
   body.page_sommaire #intro.intro-home .intro-logo{
     /*top: 0;
     left: var(--logo-offset-x);*/
     top: var(--nav-top);
     left: var(--nav-left);
 
     opacity: 1;
     transform: none;
     animation: none;
     filter: none;
   }
 
   body.page_sommaire #intro.intro-home .intro-logo img{
     height: var(--logo-h);
     width: auto;
   }
 }

/* ===== Keyframes — ACCUEIL ===== */
@keyframes introWordIn {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes introWordInX {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes introWordUp {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes introRuleDesktop {
  to { opacity: .7; transform: scaleX(1); }
}

@keyframes introRuleMobile {
  to { opacity: .7; transform: scaleX(1); }
}

@keyframes introSubDesktop {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes introSubMobile {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes introLogoPresence{
  0%{
    opacity: 0;
    transform: translateY(12px) scale(.6);
    filter: saturate(.92) contrast(.92);
  }
  85%{
    opacity: 1;
    transform: translateY(0) scale(1.2);
    filter: saturate(1) contrast(1);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(1) contrast(1);
  }
}

/* ==========================================================
09 — ARTICLE
========================================================== */

.article-head {
  display: flex;
  align-items: flex-end; /* old center */
  gap: 0.85rem;
  margin: 0 0 2rem 0;
}

.article-head__icon {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex: 0 0 64px;

  opacity: 0;
  transform: rotate(-45deg) scale(0.96);
  transform-origin: center center;

  animation: articleIconReveal 0.7s cubic-bezier(.2,.75,.2,1) forwards;
}

@keyframes articleIconReveal {
  0% {
    opacity: 0;
    transform: rotate(-45deg) scale(0.96);
  }
  100% {
    opacity: 0.82;
    transform: rotate(0deg) scale(1);
  }
}

.article-head__title {
  margin: 0;

  font-family: var(--ff-titres);
  font-weight: 300;
  font-size: clamp(1.75rem, 2.5vw, 2.6rem);
  line-height: 1.03;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  color: var(--c-azur);
}

.texte h2 {
  margin: 2.2rem 0 1rem 0;

  font-family: var(--ff-titres);
  font-weight: 400; /* old 300em*/
  font-size: clamp(1.35rem, 1.9vw, 2rem);
  line-height: 1.08;

  text-transform: lowercase;
  letter-spacing: 0.1em; /* old 0.18em*/

  color: var(--c-ocre);
}

.texte > p {
  margin: 0;
  text-indent: 3em;
  line-height: 1.72;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.125rem);
}

.texte > p + p {
  margin-top: 0.35em;
}

.texte > ul,
.texte > ol {
  line-height: 1.72;
}

.texte > ul li,
.texte > ol li {
  line-height: 1.72;
  margin-bottom: 0.2em;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.125rem) !important;
}

.texte .spip_documents {
  max-width: 100%;
  margin-bottom: 1.25rem;
}

.texte .spip_documents img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
}

.texte .parenthese {
  clear: both;
  width: 100%;
}

.texte .media-portrait .spip_documents_right,
.texte .media-portrait .spip_documents_left {
  width: min(38%, 420px);
}

.texte .media-paysage .spip_documents_right,
.texte .media-paysage .spip_documents_left {
  width: min(52%, 600px);
}

.texte .media-portrait .spip_documents_center {
  width: min(42%, 460px);
  margin-left: auto;
  margin-right: auto;
}

.texte .media-paysage .spip_documents_center {
  width: min(72%, 760px);
  margin-left: auto;
  margin-right: auto;
}

/* citation */
#main section.post blockquote {
  width: min(70%, 980px);
  margin: 2.2rem 0 3rem auto;
  padding: 0;
  border-left: 0 !important;

  color: var(--c-ocre);
  font-family: var(--ff-texte);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.25rem, 1.5rem, 1.5rem); /* old 1.1rem, 1.45vw, 1.7rem*/
  line-height: 1.38;
  letter-spacing: 0.01em;
  text-align: left;
}

#main section.post blockquote p {
  margin: 0;
  text-indent: 0 !important;
  color: inherit;
}

#main section.post blockquote cite {
  display: block;
  margin-top: 0.9rem;

  color: var(--c-ocre);
  font-style: normal;
  font-weight: 600;
  font-size: 0.95em;
  text-align: right;
}

@media screen and (max-width: 736px) {
  .texte .media-portrait .spip_documents_right,
  .texte .media-portrait .spip_documents_left,
  .texte .media-paysage .spip_documents_right,
  .texte .media-paysage .spip_documents_left,
  .texte .media-portrait .spip_documents_center,
  .texte .media-paysage .spip_documents_center {
    float: none !important;
    width: min(50vw, 300px);
    max-width: 100%;
    margin: 1rem auto 1.5rem auto;
  }

  .texte .spip_documents img {
    width: 100%;
    height: auto;
  }
}

/* ==========================================================
10 — COMPOSANTS (cartes “parenthèses”)
========================================================== */

/* Rangée tarifs : prend toute la largeur dispo du contenu */
.parentheses-row{
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: space-between;
  align-items: stretch;
  width: 100%;
  margin: 2.5rem 0;
  gap: 0;
}

/* Carte “parenthèse” (utilisable seule ou en rangée) */
.parenthese{
  /* Réglages parenthèses */
  --brace-color: var(--c-ocre);
  --brace-w: 4px;
  --brace-radius: 30px;
  --brace-arm: 2.6rem;    /* largeur de la parenthèse */
  --brace-gap: .9rem;     /* “air” entre texte et parenthèse */
  --brace-topcut: 0;     /* début parenthèse haut 5 */
  --brace-bottomcut: 0;  /* début parenthèse haut 5 */

  /* Padding interne (contenu) */
  --pad-y: 1.6rem;
  --pad-x: 1.2rem;

  position: relative;
  width: 100%;
  margin: 2.5rem 0;

  background: var(--c-blanc);
  color: var(--c-texte-principal);

  padding: var(--pad-y) var(--pad-x);
}

/* Dans une rangée : pas de marge verticale, hauteur stable */
.parentheses-row > .parenthese{
  width: 17rem;
  min-height: 15rem;
  margin: 0;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.4rem;
}

/* Parenthèses (à l’intérieur du bloc, alignées aux bords) */
.parenthese::before,
.parenthese::after{
  content: "";
  position: absolute;
  top: var(--brace-topcut);
  bottom: var(--brace-bottomcut);
  width: var(--brace-arm);
  pointer-events: none;
}

.parenthese::before{
  left: 0;
  border-left: var(--brace-w) solid var(--brace-color);
  border-top: var(--brace-w) solid var(--brace-color);
  border-bottom: var(--brace-w) solid var(--brace-color);
  border-top-left-radius: var(--brace-radius);
  border-bottom-left-radius: var(--brace-radius);
}

.parenthese::after{
  right: 0;
  border-right: var(--brace-w) solid var(--brace-color);
  border-top: var(--brace-w) solid var(--brace-color);
  border-bottom: var(--brace-w) solid var(--brace-color);
  border-top-right-radius: var(--brace-radius);
  border-bottom-right-radius: var(--brace-radius);
}

/* Typo tarifs */
.parenthese__title{
  margin: 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
  text-align: center;

  font-family: var(--ff-parenthese);
  font-weight: 900;
  font-size: clamp(1.05rem, 1vw, 1.25rem);
  line-height: 1.18;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-azur);
}
.parentheses-row > .parenthese .parenthese__title{
  margin-top: 1rem;
}

.parenthese__footer{
  margin-top: auto;
  width: 100%;
  text-align: center;
}

.parenthese__price{
  margin: 0;
  width: 100%;
  display: block;
  text-align: center;

  font-family: var(--ff-parenthese);
  font-weight: 900;
  font-size: clamp(1.7rem, 2.2vw, 2.4rem);
  letter-spacing: 0.075em;
}

.parenthese__note{
  margin: 0.9rem auto 0;
  max-width: 14ch;

  font-family: var(--ff-parenthese);
  font-size: 0.82rem;
  line-height: 1.45;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
  color: var(--c-texte-secondaire);
}

/* parenthese--media  */
.parenthese.parenthese--media {
  --pad-y: .75rem;
  --pad-x: .5rem;
  --brace-gap: .15rem;

  width: fit-content;
  max-width: 100%;
  margin: 2.5rem auto;
}

.parenthese.parenthese--media .spip_documents_right,
.parenthese.parenthese--media .spip_documents_left,
.parenthese.parenthese--media .spip_documents_center {
  width: min(600px, 100%);
  max-width: 600px;
  margin: 0 !important;
}

.parenthese.parenthese--media .spip_documents img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 736px) {
  .parenthese.parenthese--media {
    --pad-y: .6rem;
    --pad-x: .35rem;
    --brace-gap: .1rem;
    width: 100%;
    max-width: 100%;
  }

  .parenthese.parenthese--media .spip_documents_right,
  .parenthese.parenthese--media .spip_documents_left,
  .parenthese.parenthese--media .spip_documents_center {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block;
  }
}

/* Breakpoints */
@media (max-width: 980px){
  .parentheses-row{
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    column-gap: 3rem;
    row-gap: 2rem;
  }
}

@media (max-width: 760px){
  .parentheses-row{
    grid-template-columns: max-content;
    justify-content: center;
    row-gap: 1.75rem;
  }
}

@media screen and (max-width: 736px) {
  .parenthese {
    --brace-arm: 1.2rem;
    --brace-gap: .35rem;
    --pad-x: .85rem;
    --pad-y: 1.2rem;
  }
}



/* ==========================================================
20 — FOOTER (cartouche + responsive)
========================================================== */


/* Cartouche : look identique à #nav (Massively) */
#copyright.footer-cartouche {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.175);

  width: calc(100% - 4rem);
  max-width: 72rem;

  /* pousse en bas (sticky footer via flex du body) */
  margin: auto auto 3rem auto;
  padding: 0 2rem;

  position: relative;
  overflow: hidden;

  transition: background-color .2s ease-in-out;
}

#copyright.footer-cartouche:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Inner : c’est LUI le layout principal (conforme à ton HTML) */
#copyright.footer-cartouche .footer-cartouche__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;

  margin: 0;
  padding: .9rem 0; /* hauteur visuelle proche du nav */
}

/* Texte */
#copyright.footer-cartouche .footer-cartouche__copy {
  font-size: .8rem;
  font-style: italic;
  letter-spacing: 0.12em;
  text-transform: lowercase;
  font-weight: 400;
  opacity: .85;
  white-space: nowrap;
}

/* Bloc icônes (actions + réseaux) */
#copyright.footer-cartouche .footer-cartouche__icons {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Neutralise marges des UL inclus (actions + rezo) */
#copyright.footer-cartouche .footer-cartouche__icons ul {
  margin: 0;
  padding: 0;
}

/* Les UL .icons (Massively) doivent rester flex pour ne pas “sauter” */
#copyright.footer-cartouche .footer-cartouche__icons .icons {
  display: flex;
  align-items: center;
  gap: .75rem;
}

/* Annule séparateurs du thème dans ces UL */
#copyright.footer-cartouche .footer-cartouche__icons .icons li {
  border-left: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
/* Annule css main */
#copyright ul li:first-child, #copyright ul li {
	margin-top: auto;
}

/* Icônes : sans “ronds”, taille homogène */
#copyright.footer-cartouche .icons.alt a.icon::before,
#copyright.footer-cartouche .icons.alt a.icon:before {
  box-shadow: 0 0 0 0;
  font-size: 1.25rem;
}


/* Liens icônes : animation légère */
#copyright.footer-cartouche a.icon {
  color: var(--c-ivoire);
  border-bottom: 0;
  opacity: .85;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity .16s ease;
}

#copyright.footer-cartouche:hover a.icon {
  opacity: 1;
}

#copyright.footer-cartouche a.icon::before,
#copyright.footer-cartouche a.icon:before {
  display: inline-block;
  transition: transform .16s ease-in-out;
  transform-origin: center;
  /*line-height: 1;*/
  /*vertical-align: middle;*/
}

#copyright.footer-cartouche a.icon:hover::before,
#copyright.footer-cartouche a.icon:hover:before {
  transform: scale(1.5);
}

/* Responsive */
@media screen and (max-width: 736px) {
  #copyright.footer-cartouche {
	width: calc(100% - 2rem);
	margin: auto auto 1.5rem auto;
	padding: 0 1rem;
  }

  #copyright.footer-cartouche .footer-cartouche__inner {
	flex-wrap: wrap;
	justify-content: center;
	text-align: center;
	row-gap: .75rem;
  }

  #copyright.footer-cartouche .footer-cartouche__copy {
	width: 100%;
	white-space: normal;
  }

  #copyright.footer-cartouche .footer-cartouche__icons {
	width: 100%;
	justify-content: center;
	flex-wrap: wrap;
	row-gap: .75rem;
  }
}

/* ==========================================================
   Formulaire contact — radios civilité visibles
   ========================================================== */

#main .formulaire_spip .editer_civilite .choix label,
#main form .editer_civilite .choix label {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  padding-left: 0 !important;
}

/* vrai radio visible, en cassant complètement le thème */
#main .formulaire_spip .editer_civilite input[type="radio"],
#main form .editer_civilite input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;

  display: inline-block !important;
  position: relative !important;
  float: none !important;
  z-index: auto !important;

  width: 1.1rem !important;
  height: 1.1rem !important;
  margin: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  flex: 0 0 1.1rem;

  opacity: 1 !important;
  visibility: visible !important;

  border: 2px solid var(--c-ocre) !important;
  border-radius: 50% !important;
  background: var(--c-blanc) !important;
  box-shadow: none !important;
  transform: none !important;
  vertical-align: middle;
}

/* point intérieur quand coché */
#main .formulaire_spip .editer_civilite input[type="radio"]:checked,
#main form .editer_civilite input[type="radio"]:checked {
  background:
    radial-gradient(circle at center,
      var(--c-ocre) 0 34%,
      transparent 38% 100%) !important;
}

/* focus clavier */
#main .formulaire_spip .editer_civilite input[type="radio"]:focus-visible,
#main form .editer_civilite input[type="radio"]:focus-visible {
  outline: 2px solid rgba(var(--c-ocre-rgb), .45);
  outline-offset: 2px;
}