/* ==========================================================================
   Contact
   --------------------------------------------------------------------------
   Feuille propre à cette page, chargée seulement sur elle par le registre
   (inc/modeles.php). Elle n'utilise que les jetons de theme.css — couleurs,
   échelle typographique, courbes — et ne redéfinit aucune classe d'une autre
   page. Retoucher celle-ci ne peut pas abîmer les autres.

   PARENTÉ. Le vocabulaire est celui du thème : filets d'un pixel qui se
   tracent, pastille cerise, étiquettes en capitales, grands titres
   Newsreader. L'ouverture reprend la composition de « Services » ; l'échange
   est propre à cette page.

   LE FORMULAIRE N'EST PAS DESSINÉ ICI, IL EST HABILLÉ. Fluent Forms garde sa
   mécanique (grille des colonnes, logique conditionnelle, messages) ; cette
   feuille ne fait que la ramener aux jetons du thème, à l'intérieur de
   « .ct-form » et nulle part ailleurs.

   AUCUNE POLICE, AUCUNE COULEUR, AUCUNE TAILLE NOUVELLE — à une exception
   près, déclarée : 16 px pour la saisie, en dessous de quoi iOS agrandit
   la page au moment où le champ reçoit le focus.
   ========================================================================== */

:root{
  --ct-pad:       clamp(88px, 11vw, 176px);
  --ct-pad-ample: clamp(112px, 14vw, 232px);
  --ct-mesure:    62ch;
}

.ct{
  position:relative;
  padding-block:var(--ct-pad);
  background:var(--white);
}

/* Un filet très fin sépare les blocs sans les enfermer. */
.ct + .ct::before{
  content:"";
  position:absolute; left:var(--gutter); right:var(--gutter); top:0;
  height:1px; background:var(--line-soft);
}

/* --------------------------------------------------------------------------
   Éléments communs
   -------------------------------------------------------------------------- */

/* Le filet qui se trace : le tracé vit sur un pseudo-élément, jamais sur
   l'élément observé — un élément mis à l'échelle zéro n'intersecte jamais. */
.ct__filet{
  position:relative;
  display:block;
  height:1px;
}
.ct__filet::before{
  content:"";
  position:absolute; inset:0;
  background:var(--line);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1.1s var(--ease) var(--d, 0s);
}
.ct__filet.is-in::before{ transform:scaleX(1); }

.ct__tete{ margin-bottom:clamp(38px, 5vw, 72px); }

/* La mesure est posée SUR LE TITRE : « ch » se résout contre sa police. */
.ct__titre{
  max-width:26ch;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-titre);
  line-height:1.1;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:18px 0 0;
}

.ct__titre--geant{
  font-size:var(--nf-titre-fort);
  line-height:1.02;
  letter-spacing:-.022em;
  max-width:20ch;
  margin-top:26px;
}

.ct__texte,
.ct__chapeau{
  max-width:var(--ct-mesure);
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink-2);
  margin:clamp(24px, 2.8vw, 36px) 0 0;
}
.ct__chapeau{ max-width:58ch; }

.ct__emblem{
  position:absolute;
  height:auto;
  opacity:0;
  pointer-events:none;
  z-index:0;
  transition:opacity 1.5s var(--ease-soft) var(--d, 0s);
  will-change:transform, opacity;
}

.ct__point{
  flex:none;
  display:block;
  width:7px; height:7px;
  border-radius:50%;
  background:var(--cherry);
  transform:scale(.85);
  transition:transform .9s var(--ease) var(--d, 0s);
}
.is-in > .ct__point{ transform:scale(1); }

/* --------------------------------------------------------------------------
   01. Ouverture
   --------------------------------------------------------------------------
   L'en-tête est fixe : la première section compense elle-même sa hauteur.
   -------------------------------------------------------------------------- */
.ct--ouverture{
  z-index:1;
  padding-top:calc(var(--header-h) + clamp(30px, 5.5vh, 74px));
  padding-bottom:var(--ct-pad-ample);
}

.ct__emblem--ouverture{
  top:6%;
  right:-16%;
  width:clamp(500px, 52vw, 900px);
  transform:rotate(-6deg);
}
.ct__emblem--ouverture.is-in{ opacity:.05; }

.ct__ouverture{ position:relative; z-index:1; }

@media (min-width:1080px){
  .ct__ouverture{
    display:grid;
    grid-template-columns:minmax(0,1fr) clamp(290px, 25vw, 390px);
    gap:clamp(48px, 6vw, 108px);
    align-items:end;
  }
  .ct__ouverture-aparte{ padding-bottom:.6em; }
}

.ct__ouverture-aparte .ct__filet{ margin-bottom:clamp(22px, 2.4vw, 32px); }
.ct__ouverture-aparte .ct__texte{ margin-top:0; }

.ct__invite{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-top:clamp(28px, 3.2vw, 44px);
  font-size:var(--nf-etiquette);
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-3);
  transition:color .4s var(--ease-soft);
}
.ct__invite-fleche{
  width:10px; height:24px;
  transition:transform .5s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  .ct__invite:hover{ color:var(--cherry); }
  .ct__invite:hover .ct__invite-fleche{ transform:translateY(5px); }
}

/* --------------------------------------------------------------------------
   02. L'échange
   --------------------------------------------------------------------------
   Avec formulaire : deux colonnes, le formulaire d'abord — dans la lecture
   comme dans le balisage. Les coordonnées restent à l'écran pendant qu'on
   remplit le formulaire.

   Sans formulaire : les coordonnées prennent la place, à l'échelle des
   énoncés, précédées d'une phrase qui invite à écrire.
   -------------------------------------------------------------------------- */
.ct__echange--formulaire{
  display:grid;
  gap:clamp(56px, 7vw, 96px);
}

@media (min-width:1080px){
  .ct__echange--formulaire{
    grid-template-columns:minmax(0,1fr) clamp(250px, 22vw, 340px);
    gap:clamp(56px, 7vw, 128px);
    align-items:start;
  }
  .ct__echange--formulaire .ct__coordonnees{
    position:sticky;
    top:calc(var(--header-h) + 32px);
  }
}

.ct__formulaire{ min-width:0; }

.ct__direct-texte{
  max-width:46ch;
  margin:0 0 clamp(40px, 4.6vw, 68px);
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-enonce);
  line-height:1.6;
  color:var(--ink);
}

/* Coordonnées */
.ct__coords{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(26px, 3vw, 40px);
}

.ct__coords--ample{
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap:clamp(36px, 4vw, 64px);
}

.ct__coord .ct__filet{ margin-bottom:18px; }

.ct__coord-libelle{
  margin:0 0 10px;
  font-size:var(--nf-etiquette);
  font-weight:400;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-3);
}

.ct__coord-valeur{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.ct__coord-valeur--reseaux{
  flex-direction:row;
  flex-wrap:wrap;
  gap:6px 24px;
}

/* Un e-mail long se coupe plutôt que d'élargir la page. */
.ct__coord-lien{
  position:relative;
  display:inline-block;
  max-width:100%;
  padding-block:4px 6px;
  font-size:var(--nf-corps);
  line-height:1.5;
  color:var(--ink);
  overflow-wrap:anywhere;
  transition:color .4s var(--ease-soft);
}
.ct__coord-lien::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:1px;
  background:var(--cherry);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .55s var(--ease);
}

@media (hover:hover) and (pointer:fine){
  .ct__coord-lien:hover{ color:var(--cherry); }
  .ct__coord-lien:hover::after{ transform:scaleX(1); transform-origin:left; }
}

.ct__coords--ample .ct__coord-lien{
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-emphase);
  line-height:1.25;
  letter-spacing:-.008em;
}
.ct__coords--ample .ct__coord-valeur--reseaux .ct__coord-lien{
  font-family:var(--f-sans);
  font-size:var(--nf-enonce);
  font-weight:400;
}

/* Avis réservé aux administrateurs : jamais servi à un visiteur. */
.ct .nafrini-avis-admin{
  max-width:72ch;
  margin:0 0 28px;
  padding:14px 18px;
  border:1px dashed var(--ink-4);
  background:var(--paper);
  font-size:var(--nf-meta);
  line-height:1.6;
  color:var(--ink-2);
}
.ct .nafrini-avis-admin strong{ font-weight:500; color:var(--ink); }
.ct .nafrini-avis-admin a{
  color:var(--cherry);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* --------------------------------------------------------------------------
   Formulaire Fluent Forms — habillage
   --------------------------------------------------------------------------
   Portée : « .ct-form .fluentform ». Trois classes : assez pour passer
   devant la feuille par défaut de Fluent Forms sans « !important », sauf
   sur le bouton, dont Fluent Forms écrit la couleur en attribut style.
   -------------------------------------------------------------------------- */
.ct-form .fluentform{
  font-family:var(--f-sans);
  color:var(--ink);
}

.ct-form .fluentform fieldset{ margin:0; padding:0; border:0; min-width:0; }

/* Le titre du formulaire n'est destiné qu'aux lecteurs d'écran : la section
   porte déjà le sien. Masqué ici sans dépendre de la feuille de l'outil. */
.ct-form .fluentform .ff_screen_reader_title{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

.ct-form .fluentform .ff-el-group{ margin-bottom:clamp(24px, 2.6vw, 34px); }

/* Colonnes du formulaire : la grille reste celle de Fluent Forms, seul
   l'écart rejoint celui du thème. */
.ct-form .fluentform .ff-t-container{ gap:clamp(20px, 2.4vw, 36px); }

.ct-form .fluentform .ff-el-input--label{ margin-bottom:6px; }

.ct-form .fluentform .ff-el-input--label label{
  font-family:var(--f-sans);
  font-size:var(--nf-meta);
  font-weight:400;
  line-height:1.5;
  letter-spacing:.02em;
  color:var(--ink-2);
}

.ct-form .fluentform .ff-el-is-required.asterisk-right label::after,
.ct-form .fluentform .ff-el-is-required.asterisk-left label::before{
  color:var(--cherry);
}

.ct-form .fluentform .ff-el-form-control{
  display:block;
  width:100%;
  min-height:48px;
  margin:0;
  padding:10px 0 12px;
  font-family:var(--f-sans);
  font-size:16px;
  font-weight:300;
  line-height:1.6;
  color:var(--ink);
  background-color:transparent;
  border:0;
  border-bottom:1px solid var(--line);
  border-radius:0;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .4s var(--ease-soft), box-shadow .4s var(--ease-soft);
}

.ct-form .fluentform .ff-el-form-control::placeholder{
  color:var(--ink-3);
  opacity:1;
}

.ct-form .fluentform textarea.ff-el-form-control{
  min-height:9.5em;
  resize:vertical;
}

/* Le chevron d'une liste, dessiné à l'encre du thème. */
.ct-form .fluentform select.ff-el-form-control{
  padding-right:28px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%230C0C0D' stroke-width='1.1'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 2px center;
  background-size:12px 8px;
  cursor:pointer;
}

@media (hover:hover) and (pointer:fine){
  .ct-form .fluentform .ff-el-form-control:hover{ border-bottom-color:var(--ink-4); }
}

/* Le focus est le filet cerise, épaissi à deux pixels : un indicateur
   contrasté (5,9:1 sur blanc) qui ne déplace rien. Le contour général du
   thème reste en place sur les cases, les boutons radio et le bouton. */
.ct-form .fluentform .ff-el-form-control:focus{
  outline:none;
  border-bottom-color:var(--cherry);
  box-shadow:0 1px 0 0 var(--cherry);
}

.ct-form .fluentform .ff-el-help-message{
  margin-top:8px;
  font-size:var(--nf-meta);
  font-style:normal;
  line-height:1.5;
  color:var(--ink-3);
}

/* Cases à cocher et boutons radio — consentement compris. */
.ct-form .fluentform .ff-el-form-check{ margin-bottom:10px; }

.ct-form .fluentform .ff-el-form-check-label{
  display:inline-flex;
  align-items:flex-start;
  gap:12px;
  font-size:var(--nf-meta);
  line-height:1.6;
  color:var(--ink-2);
  cursor:pointer;
}

.ct-form .fluentform .ff-el-form-check-input{
  flex:none;
  width:18px; height:18px;
  margin:2px 0 0;
  accent-color:var(--cherry);
}

.ct-form .fluentform .ff-el-form-check-label a,
.ct-form .fluentform .ff_t_c a{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Erreurs : l'encre cerise foncée, jamais le rouge par défaut. */
.ct-form .fluentform .ff-el-is-error .ff-el-form-control{ border-bottom-color:var(--cherry-deep); }

.ct-form .fluentform .error,
.ct-form .fluentform .text-danger{
  margin-top:8px;
  font-size:var(--nf-meta);
  line-height:1.5;
  color:var(--cherry-deep);
}

.ct-form .ff-errors-in-stack{
  margin-top:18px;
  color:var(--cherry-deep);
  font-size:var(--nf-meta);
}

/* Le bouton reprend .btn--primary : aplat cerise, balayage encre au survol.
   Fluent Forms écrit sa couleur en attribut style : « !important » est le
   seul moyen de la ramener au thème sans toucher au réglage du formulaire. */
.ct-form .fluentform .ff_submit_btn_wrapper{ margin-top:clamp(30px, 3.4vw, 46px); margin-bottom:0; }

.ct-form .fluentform .ff-btn-submit{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:19px 34px;
  font-family:var(--f-sans);
  font-size:11.5px;
  font-weight:500;
  line-height:1;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#fff !important;
  background-color:var(--cherry) !important;
  background-image:linear-gradient(var(--ink), var(--ink)) !important;
  background-repeat:no-repeat !important;
  background-position:0 100% !important;
  background-size:100% 0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transition:background-size .62s var(--ease), opacity .3s var(--ease-soft);
}

.ct-form .fluentform .ff-btn-submit:hover,
.ct-form .fluentform .ff-btn-submit:focus-visible{
  background-size:100% 100% !important;
  opacity:1;
}

.ct-form .fluentform .ff-btn-submit[disabled],
.ct-form .fluentform .ff-btn-submit.disabled{
  opacity:.6;
  cursor:progress;
}

/* Le message de confirmation remplace le formulaire : c'est un énoncé,
   pas une alerte. */
.ct-form .ff-message-success{
  margin:0;
  padding:4px 0 4px 26px;
  background:none;
  border:0;
  border-left:2px solid var(--cherry);
  border-radius:0;
  box-shadow:none;
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-emphase);
  line-height:1.3;
  color:var(--ink);
}
.ct-form .ff-message-success p{ margin:0; }

/* Curseur. Le thème masque le pointeur natif partout (html.has-cursor *).
   Dans le formulaire, on le rend — barre d'insertion sur la saisie, main
   sur ce qui se clique — et on retire le curseur personnalisé tant que le
   pointeur survole le formulaire, pour ne jamais en afficher deux. */
html.has-cursor .ct-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]), textarea){
  cursor:text !important;
}
html.has-cursor .ct-form :is(select, label, button, a, [type="checkbox"], [type="radio"], [type="submit"], [type="button"]){
  cursor:pointer !important;
}
html.has-cursor:has(.ct-form:hover) .cursor{ opacity:0; }

/* --------------------------------------------------------------------------
   03. Ce qui se passe ensuite
   --------------------------------------------------------------------------
   Trois colonnes de même rang. Le numéro dit l'ordre — c'est une séquence
   réelle — et la pastille rattache chaque étape au vocabulaire du thème.
   -------------------------------------------------------------------------- */
.ct--suite{ padding-bottom:var(--ct-pad-ample); }

/* Ancré par le haut, dans la section : positionné, l'emblème se peindrait
   par-dessus le fond encre du pied de page s'il en débordait. */
.ct__emblem--suite{
  top:8%;
  right:-12%;
  width:clamp(380px, 40vw, 700px);
  transform:rotate(5deg);
}
.ct__emblem--suite.is-in{ opacity:.042; }

.ct--suite .shell{ position:relative; z-index:1; }

.ct__etapes{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:clamp(44px, 5vw, 64px);
}

@media (min-width:900px){
  .ct__etapes{
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:clamp(32px, 4vw, 72px);
  }
}

.ct__etape .ct__filet{ margin-bottom:clamp(22px, 2.4vw, 32px); }

.ct__etape-repere{
  display:flex;
  align-items:center;
  gap:14px;
  margin:0 0 clamp(18px, 2vw, 26px);
}

.ct__etape-num{
  font-family:var(--f-display);
  font-weight:300;
  font-size:var(--nf-emphase);
  line-height:1;
  letter-spacing:-.02em;
  color:var(--ink-4);
  font-variant-numeric:tabular-nums;
}

.ct__etape-titre{
  margin:0;
  font-family:var(--f-display);
  font-weight:400;
  font-size:var(--nf-emphase);
  line-height:1.2;
  letter-spacing:-.008em;
  color:var(--ink);
  text-wrap:balance;
}

.ct__etape-texte{
  max-width:40ch;
  margin:14px 0 0;
  font-size:var(--nf-corps);
  line-height:1.78;
  color:var(--ink-2);
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */
@media (max-width:640px){
  .ct__titre--geant{ max-width:none; }

  /* Au doigt, un lien de texte doit rester une cible de 44 px. */
  .ct__invite{ padding-block:16px 7px; }
  .ct__coord-lien{ padding-block:10px; }

  .ct-form .fluentform .ff-btn-submit{ width:100%; justify-content:center; }
}

/* --------------------------------------------------------------------------
   Ancres — l'en-tête est fixe, le thème ne compense aucune ancre.
   -------------------------------------------------------------------------- */
.ct[id]{ scroll-margin-top:calc(var(--header-h) + 24px); }

/* --------------------------------------------------------------------------
   Mouvement réduit — états que la règle générale du thème ne connaît pas.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .ct__filet::before{ transform:scaleX(1) !important; }
  .ct__point{ transform:scale(1) !important; }
  .ct__emblem--ouverture{ opacity:.05 !important; transform:rotate(-6deg) !important; }
  .ct__emblem--suite{ opacity:.042 !important; transform:rotate(5deg) !important; }
  .ct-form .fluentform .ff-btn-submit{ transition:none; }
}

/* --------------------------------------------------------------------------
   Amélioration progressive — l'état d'arrivée est le défaut.
   Voir theme.css, section 15 bis.
   -------------------------------------------------------------------------- */
html:not(.nf-anime) .ct__filet::before{ transform:scaleX(1) !important; }
html:not(.nf-anime) .ct__point{ transform:scale(1) !important; }
html:not(.nf-anime) .ct__emblem--ouverture,
html:not(.nf-anime) .ct__emblem--suite{ opacity:.045 !important; }