/* =====================================================================
   INDUSTRIEUSE FOURMI — animations partagées du site
   Inclus une seule fois par les fichiers de navigation (nav-public.php…).
   CSS pur (indépendant de Tailwind : aucune recompilation nécessaire).
   Couleurs : variables de la charte graphique écrites par charte-css.php
   (--if-marron et --if-gold, au format « R G B »).
   ===================================================================== */

:root {
  --if-c-marron: rgb(var(--if-marron, 101 56 24));
  --if-c-gold:   rgb(var(--if-gold, 255 152 0));
  --if-creme:    #fffaf3;
}

/* =====================================================================
   1. TRANSITION DE PAGE « FOURMI + TROIS POINTS » (10/11/2026)
   Retour de l'ancienne animation : la fourmi du logo (favicon) se balance
   au centre d'un voile blanc, avec trois points marron, or et gris qui
   sautillent l'un après l'autre.
   Départ (clic sur un lien .nav-transition) : le voile apparaît en fondu.
   Arrivée (page suivante) : le voile s'efface en fondu.
   ===================================================================== */
.if-voile {
  position: fixed; inset: 0; z-index: 2147483000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; visibility: hidden; opacity: 0;
  background: rgb(255 255 255 / .95);
}
.if-voile__chargement { display: flex; flex-direction: column; align-items: center; }
.if-voile__fourmi-logo {
  display: block; width: 72px; height: 72px; object-fit: contain;
  filter: drop-shadow(0 4px 10px rgb(var(--if-marron, 101 56 24) / .25));
  animation: if-sp-balance .45s ease-in-out infinite alternate;
}
.if-voile__points { display: flex; gap: 8px; margin-top: 18px; }
.if-voile__point {
  width: 9px; height: 9px; border-radius: 50%;
  animation: if-sp-point .55s ease-in-out infinite alternate;
}
.if-voile__point--marron { background: var(--if-c-marron); }
.if-voile__point--or     { background: var(--if-c-gold); animation-delay: .18s; }
.if-voile__point--gris   { background: #9ca3af; animation-delay: .36s; }

@keyframes if-sp-balance { from { transform: scale(.86) rotate(-8deg); } to { transform: scale(1.12) rotate(8deg); } }
@keyframes if-sp-point   { from { transform: translateY(0); opacity: .25; } to { transform: translateY(-10px); opacity: 1; } }

/* --- Départ ---------------------------------------------------------- */
.if-voile.is-depart {
  visibility: visible; opacity: 1; pointer-events: auto;
  transition: opacity .2s ease;
}

/* --- Arrivée (classe posée sur <html> avant le premier affichage) -------
   L'effacement est une animation CSS : même si le JavaScript ne se charge
   pas, le voile disparaît tout seul et ne bloque jamais la page.          */
html.if-arrivee .if-voile { visibility: visible; opacity: 1; animation: if-voile-sortie .4s ease .25s forwards; }

@keyframes if-voile-sortie { to { opacity: 0; visibility: hidden; } }
/* Onde or (encore utilisée par les cartes Contacts, [data-if-contact]) */
@keyframes if-onde     { 0% { opacity: .85; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.65); } }

/* Pendant la transition : on évite tout défilement parasite */
html.if-transition-en-cours { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .if-voile { display: none !important; }
}

/* =====================================================================
   2. ANIMATION DU CONTENU DES PAGES PUBLIQUES
   (connexion, mot de passe oublié, créer un compte, contacts, studio…)
   Piloté par des attributs posés dans les pages, voir ifourmi-anim.js :
     data-if-revele="haut|gauche|droite|zoom|rideau"  apparition au défilement
     data-if-cascade="…"   les enfants directs apparaissent l'un après l'autre
     data-if-form          formulaire vivant (focus, bouton, messages, erreurs)
     data-if-image         image : dévoilement en rideau, zoom lent, inclinaison au survol
     data-if-contact       ligne de contact : icône qui s'anime au survol
     data-if-onglets       onglets : l'icône rebondit au clic
   La classe html.if-anim-pret n'est posée que si le JavaScript tourne :
   sans JavaScript, tout le contenu reste visible normalement.
   ===================================================================== */
html.if-anim-pret, html.if-anim-pret body { overflow-x: clip; }   /* les éléments qui glissent depuis les côtés ne créent jamais de défilement horizontal */

/* --- Apparition au défilement -----------------------------------------
   État de départ tant que l'élément n'est pas « vu » ; transition tant qu'il
   n'est pas « fini » (ensuite ses propres effets de survol reprennent la main). */
html.if-anim-pret [data-if-revele]:not(.is-fini),
html.if-anim-pret [data-if-cascade] > :not(.is-fini) {
  transition: opacity .7s ease var(--if-delai, 0s), transform .85s cubic-bezier(.2, .8, .2, 1) var(--if-delai, 0s),
              filter .7s ease var(--if-delai, 0s), clip-path 1.1s cubic-bezier(.77, 0, .18, 1) var(--if-delai, 0s),
              color .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
html.if-anim-pret [data-if-revele]:not(.is-vu),
html.if-anim-pret [data-if-cascade] > :not(.is-vu) { opacity: 0; transform: translate3d(0, 26px, 0); }
html.if-anim-pret [data-if-revele="gauche"]:not(.is-vu), html.if-anim-pret [data-if-cascade="gauche"] > :not(.is-vu) { transform: translate3d(-34px, 0, 0); }
html.if-anim-pret [data-if-revele="droite"]:not(.is-vu), html.if-anim-pret [data-if-cascade="droite"] > :not(.is-vu) { transform: translate3d(34px, 0, 0); }
html.if-anim-pret [data-if-revele="zoom"]:not(.is-vu),   html.if-anim-pret [data-if-cascade="zoom"] > :not(.is-vu)   { transform: scale(.9); filter: blur(4px); }
html.if-anim-pret [data-if-revele="rideau"]:not(.is-vu) { opacity: 1; transform: none; clip-path: inset(0 100% 0 0); }

/* --- Barre or sous le titre de page : se dessine puis reflet ------------ */
.if-barre { position: relative; overflow: hidden; }
html.if-anim-pret .if-barre { transform: scaleX(0); animation: if-barre 1s cubic-bezier(.2, .8, .2, 1) var(--if-depart, .35s) forwards; }
.if-barre::after {
  content: ''; position: absolute; inset: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .85), transparent);
  transform: translateX(-120%); animation: if-reflet-barre 3.2s ease-in-out calc(var(--if-depart, .35s) + 1.1s) infinite;
}
@keyframes if-barre        { to { transform: scaleX(1); } }
@keyframes if-reflet-barre { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* --- Formulaires vivants ----------------------------------------------- */
[data-if-form] { transition: box-shadow .4s ease, transform .4s ease; }
[data-if-form]:focus-within { box-shadow: 0 10px 40px rgb(var(--if-marron, 101 56 24) / .16) !important; }
/* Le libellé du champ actif passe en or et glisse légèrement */
[data-if-form] label { transition: color .25s ease, transform .25s ease; }
[data-if-form] div:focus-within > label:first-child { color: var(--if-c-gold); transform: translateX(4px); }
[data-if-form] input:not([type=checkbox]):not([type=radio]), [data-if-form] select, [data-if-form] textarea {
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease, transform .25s ease;
}
[data-if-form] input:not([type=checkbox]):not([type=radio]):focus, [data-if-form] select:focus { transform: translateY(-1px); }

/* Bouton principal : reflet qui passe régulièrement, onde au clic */
.if-bouton { position: relative; overflow: hidden; isolation: isolate; transition: background-color .25s, transform .2s ease, box-shadow .25s ease; }
.if-bouton:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgb(var(--if-marron, 101 56 24) / .8); }
.if-bouton:not(:disabled):active { transform: translateY(0) scale(.98); }
.if-bouton::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgb(255 255 255 / .28), transparent);
  transform: translateX(-130%) skewX(-18deg); animation: if-reflet-bouton 4.5s ease-in-out 1.6s infinite;
}
.if-bouton:disabled::before { animation: none; opacity: 0; }
@keyframes if-reflet-bouton { 0%, 70% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }
.if-onde { position: absolute; border-radius: 50%; pointer-events: none; background: rgb(255 255 255 / .45); transform: scale(0); animation: if-onde-clic .65s ease-out forwards; }
@keyframes if-onde-clic { to { transform: scale(4); opacity: 0; } }

/* Messages et champs qui apparaissent (classe « hidden » retirée par la page) */
.if-apparait       { animation: if-apparait .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.if-apparait--doux { animation: if-apparait-doux .45s ease both; }
.if-secoue         { animation: if-secoue .5s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes if-apparait      { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes if-apparait-doux { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes if-secoue {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); }
}

/* Cartes à cocher (Service, Sexe) : petit saut à la sélection */
[data-if-form] label:has(> input:checked) > i { animation: if-rebond .55s cubic-bezier(.3, 1.6, .5, 1) backwards; }
[data-if-form] label:has(> input:not(:disabled)):hover > i { transform: translateY(-3px); transition: transform .25s ease; }

/* --- Images : rideau à l'arrivée, zoom lent, inclinaison au survol ------ */
[data-if-image] { --rx: 0deg; --ry: 0deg; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease; will-change: transform; }
[data-if-image]:hover { box-shadow: 0 22px 50px rgb(var(--if-marron, 101 56 24) / .26) !important; }
[data-if-image] img { animation: if-zoom-lent 18s ease-in-out infinite alternate; }
@keyframes if-zoom-lent { from { scale: 1; } to { scale: 1.08; } }
/* Étiquette or posée sur l'image : glisse depuis la gauche */
html.if-anim-pret [data-if-image] > span { opacity: 0; transform: translateX(-16px); transition: opacity .5s ease 1s, transform .6s cubic-bezier(.2, .8, .2, 1) 1s; }
html.if-anim-pret .is-vu [data-if-image] > span, html.if-anim-pret [data-if-image].is-vu > span { opacity: 1; transform: none; }

/* --- Lignes de contact : l'icône se remplit et émet une onde au survol --- */
[data-if-contact] > div:first-child { position: relative; transition: background-color .3s ease, color .3s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
[data-if-contact] > div:first-child::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--if-c-gold); opacity: 0; }
[data-if-contact]:hover > div:first-child { background: var(--if-c-marron); color: #fff; transform: rotate(-8deg) scale(1.08); }
[data-if-contact]:hover > div:first-child::after { animation: if-onde 1.1s ease-out infinite; }
[data-if-contact] > div:last-child > div:last-child { transition: color .3s ease, transform .3s ease; }
[data-if-contact]:hover > div:last-child > div:last-child { color: var(--if-c-marron); transform: translateX(4px); }
html.if-anim-pret [data-if-cascade] > [data-if-contact].is-vu > div:first-child { animation: if-rebond .7s cubic-bezier(.3, 1.6, .5, 1) calc(var(--if-delai, 0s) + .25s) backwards; }
@keyframes if-rebond { 0% { transform: scale(.4); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* --- Montants (data-if-compteur) : pulsation or quand le montant change --- */
[data-if-compteur] { display: inline-block; font-variant-numeric: tabular-nums; }
.if-pulse { animation: if-pulse .6s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes if-pulse {
  0% { transform: scale(1); text-shadow: none; }
  40% { transform: scale(1.12); text-shadow: 0 0 14px rgb(var(--if-gold, 255 152 0) / .55); }
  100% { transform: scale(1); text-shadow: none; }
}

/* --- Onglets (studio) ---------------------------------------------------- */
[data-if-onglets] button i { transition: transform .3s ease; }
[data-if-onglets] button:hover i { transform: scale(1.15); }
[data-if-onglets] button.if-rebond-icone i { animation: if-rebond .55s cubic-bezier(.3, 1.6, .5, 1) both; }
/* Contenu d'un onglet : les paragraphes arrivent l'un après l'autre */
.studio-pane.animate-paneIn > div > * { animation: if-apparait-doux .55s ease both; }
.studio-pane.animate-paneIn > div > :nth-child(2) { animation-delay: .08s; }
.studio-pane.animate-paneIn > div > :nth-child(3) { animation-delay: .16s; }
.studio-pane.animate-paneIn > div > :nth-child(4) { animation-delay: .24s; }
.studio-pane.animate-paneIn > div > :nth-child(n+5) { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  html.if-anim-pret [data-if-revele]:not(.is-vu), html.if-anim-pret [data-if-cascade] > :not(.is-vu),
  html.if-anim-pret [data-if-image] > span { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
  html.if-anim-pret .if-barre { transform: none; animation: none; }
  .if-barre::after, .if-bouton::before, [data-if-image] img, .if-apparait, .if-apparait--doux, .if-secoue,
  [data-if-form] label > i, .studio-pane.animate-paneIn > div > *, [data-if-contact] > div:first-child, .if-pulse { animation: none !important; }
  [data-if-image] { transform: none !important; }
}

/* =====================================================================
   3. EFFET « LIGNES DE BALAYAGE ENTRELACÉES » — carrousel de index.php
   Trait lumineux or qui court en tête de chaque ligne balayée (voir
   window.ifourmiBalayage dans ifourmi-anim.js).
   ===================================================================== */
.if-balayage-trait {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in srgb, var(--if-c-gold) 70%, #fff), #fff 50%, color-mix(in srgb, var(--if-c-gold) 70%, #fff));
  mix-blend-mode: screen; opacity: .95;
}

/* =====================================================================
   4. PAGE D'ACCUEIL EN DEUX PARTIES — index.php (restylée le 27/10/2026)
   Ordinateur (≥ 1024 px) : à gauche, le menu vertical « Que souhaitez-vous
   faire aujourd'hui ? » (12 rubriques) sur fond marron quadrillé ; à droite,
   le carrousel des bannières, redimensionné pour occuper le reste de la
   largeur. Un filet or sépare franchement les deux parties.
   Tablette / mobile : le carrousel (moins haut) puis le menu, l'un sous l'autre.
   Le long des boutons court une « piste de fourmis » or (pointillés qui
   avancent) ; au survol, la pastille du bouton s'allume sur la piste.
   Apparition : modules data-if-revele / data-if-cascade (section 2).
   ===================================================================== */
.if-accueil-zone {
  --if-acc-l: clamp(400px, 28vw, 420px);   /* largeur de la partie gauche — 06/11/2026 : libellés raccourcis (« Confectionner un cachet automatique », le plus long, tient sur une ligne de 1024 à 1920 px ; mesuré avec Poppins 600) */
  --if-acc-h: clamp(32px, calc((100svh - var(--navbar-h, 78px) - 190px) / 13.5), 44px);  /* hauteur d'un bouton (13 rubriques — 08/11/2026) */
  --if-acc-g: 5px;                                                          /* écart entre les boutons */
  display: flex; flex-direction: column;
}
.if-accueil-zone #heroCarousel { order: -1; height: min(62svh, 520px) !important; }   /* mobile : bannières d'abord, menu juste dessous */

/* --- Partie gauche : menu vertical ------------------------------------- */
.if-accueil {
  position: relative; overflow: hidden;
  background-color: color-mix(in srgb, var(--if-c-marron) 88%, #000);
  background-image:                                                         /* quadrillage discret, comme le bandeau du back-office */
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 22px 22px;
  padding: 30px 16px 36px;
}
.if-accueil__boite { position: relative; width: 100%; max-width: 440px; margin: 0 auto; }

.if-accueil__salut {
  margin: 0; color: #fff;
  font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800;
  font-size: clamp(24px, 2.1vw, 30px); line-height: 1.1;
}
.if-accueil__question {
  margin: 4px 0 0; color: rgba(255, 255, 255, .82);
  font-family: var(--if-police-corps, "Open Sans"), sans-serif; font-size: 15px; line-height: 1.35;
}
.if-accueil__question::after {          /* trait or qui se dessine sous la question */
  content: ""; display: block; height: 3px; width: 64px; margin-top: 12px;
  background: var(--if-c-gold); transform-origin: left; transform: scaleX(0);
  animation: if-acc-trait .7s cubic-bezier(.2, .8, .2, 1) calc(var(--if-depart, .35s) + .25s) forwards;
}
@keyframes if-acc-trait { to { transform: scaleX(1); } }

/* --- Liste des rubriques + piste de fourmis ----------------------------- */
.if-accueil__liste {
  position: relative; list-style: none; margin: 16px 0 0; padding: 0 0 0 22px;
  display: flex; flex-direction: column; gap: var(--if-acc-g);
}
.if-accueil__liste::before {            /* pointillés or qui avancent vers le bas */
  content: ""; position: absolute; left: 6px; top: calc(var(--if-acc-h) / 2); bottom: calc(var(--if-acc-h) / 2); width: 2px;
  background: repeating-linear-gradient(to bottom, var(--if-c-gold) 0 5px, transparent 5px 11px);
  background-size: 2px 11px; opacity: .75;
  animation: if-acc-piste 1.1s linear infinite;
}
@keyframes if-acc-piste { to { background-position: 0 11px; } }

/* --- Boutons : tous de la même largeur et de la même hauteur ------------ */
.if-accueil__btn {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; height: var(--if-acc-h); padding: 0 12px; box-sizing: border-box;
  color: #fff; text-decoration: none; overflow: visible;
  font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 600;
  font-size: clamp(13px, calc(var(--if-acc-h) * .34), 14.5px); line-height: 1.15;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16);
  isolation: isolate;
  transition: color .25s ease, border-color .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.if-accueil__btn::before {              /* remplissage or qui balaie de gauche à droite */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--if-c-gold); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.65, 0, .35, 1);
}
.if-accueil__btn::after {               /* pastille posée sur la piste */
  content: ""; position: absolute; left: -21px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: color-mix(in srgb, var(--if-c-marron) 88%, #000); box-shadow: 0 0 0 2px var(--if-c-gold);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.if-accueil__btn i {
  width: 18px; flex: 0 0 18px; text-align: center; font-size: .95em; color: var(--if-c-gold);
  transition: color .25s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.if-accueil__btn span { min-width: 0; }   /* un libellé long passe sur 2 lignes, sans changer la hauteur du bouton */

.if-accueil__btn:hover, .if-accueil__btn:focus-visible {
  color: var(--if-c-marron); border-color: var(--if-c-gold); transform: translateX(4px); outline: none;
}
.if-accueil__btn:hover::before, .if-accueil__btn:focus-visible::before { transform: scaleX(1); }
.if-accueil__btn:hover::after, .if-accueil__btn:focus-visible::after {
  background: var(--if-c-gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--if-c-gold) 35%, transparent); transform: translateX(-4px) scale(1.15);
}
.if-accueil__btn:hover i, .if-accueil__btn:focus-visible i { color: var(--if-c-marron); transform: scale(1.18) rotate(-8deg); }
.if-accueil__btn:focus-visible { box-shadow: 0 0 0 2px #fff; }
.if-accueil__btn:active { transform: translateX(4px) scale(.98); }

/* --- Ordinateur : deux parties côte à côte ------------------------------ */
@media (min-width: 1024px) {
  .if-accueil-zone {
    display: grid; grid-template-columns: var(--if-acc-l) minmax(0, 1fr);
    height: calc(100svh - var(--navbar-h, 78px)); min-height: 640px;
  }
  .if-accueil-zone #heroCarousel { order: 0; height: 100% !important; min-height: 0 !important; }
  .if-accueil {
    display: flex; align-items: center;
    border-top: 0; border-right: 4px solid var(--if-c-gold);
    padding: 24px 26px 24px 28px;
  }
  .if-accueil__boite { max-width: none; }
  /* Titres des bannières à l'échelle de la partie droite */
  .if-accueil-zone .caption-title { font-size: clamp(26px, 3.6vw, 54px); }
  .if-accueil-zone .caption-sub   { font-size: clamp(13px, 1.35vw, 18px); }
}

/* =====================================================================
   4 bis. MENU VERTICAL CLAIR (27/10/2026) — classe if-accueil--clair + une variante
   Fond blanc, texte sombre, la couleur de la charte réservée aux détails.
     if-accueil--lignes    : rubriques séparées par un filet ; au survol, une barre
                             marron se dessine à gauche et une flèche apparaît.
     if-accueil--pastilles : icône dans une pastille teintée ; au survol, la pastille
                             se remplit et l'icône rebondit.
     if-accueil--fourmi    : au survol, un point (la fourmi) court sous la rubrique
                             et laisse un trait derrière lui.
   ===================================================================== */
.if-accueil.if-accueil--clair {
  --if-poussin: #fffdf2;                 /* jaune poussin très clair : adoucit le blanc */
  background: var(--if-poussin); background-image: none;
  border-top: 1px solid #f3ead0;
}
.if-accueil--clair .if-accueil__salut    { color: var(--if-c-marron); }
.if-accueil--clair .if-accueil__question { color: #6a6560; }
.if-accueil--clair .if-accueil__question::after { width: 40px; height: 2px; }
.if-accueil--clair .if-accueil__liste    { padding-left: 0; gap: 0; }
.if-accueil--clair .if-accueil__liste::before { display: none; }
.if-accueil--clair .if-accueil__btn {
  color: #2e2a27; background: none; border: 0; font-weight: 600;
  padding: 0 30px 0 10px;
}
.if-accueil--clair .if-accueil__btn::after { display: none; }
.if-accueil--clair .if-accueil__btn i { color: color-mix(in srgb, var(--if-c-marron) 70%, #fff); }
.if-accueil--clair .if-accueil__btn:hover,
.if-accueil--clair .if-accueil__btn:focus-visible { color: var(--if-c-marron); box-shadow: none; }
.if-accueil--clair .if-accueil__btn:focus-visible { outline: 2px solid var(--if-c-marron); outline-offset: -2px; }
.if-accueil--clair .if-accueil__btn:hover i,
.if-accueil--clair .if-accueil__btn:focus-visible i { color: var(--if-c-marron); }

/* --- Variante « Lignes » ------------------------------------------------ */
.if-accueil--lignes .if-accueil__liste > li + li .if-accueil__btn { border-top: 1px solid #efebe7; }
.if-accueil--lignes .if-accueil__btn::before {          /* barre marron qui se dessine à gauche */
  inset: 6px auto 6px 0; width: 3px; background: var(--if-c-marron);
  transform: scaleY(0); transform-origin: center;
}
.if-accueil--lignes .if-accueil__btn:hover::before,
.if-accueil--lignes .if-accueil__btn:focus-visible::before { transform: scaleY(1); }
.if-accueil--lignes .if-accueil__btn > span::after {    /* flèche qui glisse à droite */
  content: "\203A"; position: absolute; right: 12px; top: 50%; font-size: 20px; line-height: 1;
  color: var(--if-c-gold); opacity: 0; transform: translate(-8px, -55%);
  transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.if-accueil--lignes .if-accueil__btn:hover > span::after,
.if-accueil--lignes .if-accueil__btn:focus-visible > span::after { opacity: 1; transform: translate(0, -55%); }
.if-accueil--lignes .if-accueil__btn:hover i { transform: none; }

/* --- Variante « Pastilles » --------------------------------------------- */
.if-accueil--pastilles .if-accueil__liste { gap: 2px; }
.if-accueil--pastilles .if-accueil__btn { padding: 0 8px 0 6px; gap: 12px; border-radius: 10px; }
.if-accueil--pastilles .if-accueil__btn::before {       /* fond très léger au survol */
  border-radius: 10px; background: color-mix(in srgb, var(--if-c-marron) 9%, var(--if-poussin, #fffdf2));   /* survol : marron très clair */
  transform: none; opacity: 0; transition: opacity .25s ease;
}
.if-accueil--pastilles .if-accueil__btn:hover::before,
.if-accueil--pastilles .if-accueil__btn:focus-visible::before { opacity: 1; transform: none; }
.if-accueil--pastilles .if-accueil__btn i {
  width: calc(var(--if-acc-h) - 8px); height: calc(var(--if-acc-h) - 8px); flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
  font-size: 13px; color: var(--if-c-marron);
  background: #fff; box-shadow: 0 0 0 1px color-mix(in srgb, var(--if-c-marron) 12%, transparent), 0 1px 2px rgba(101, 56, 24, .08);
  transition: background .25s ease, color .25s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.if-accueil--pastilles .if-accueil__btn:hover i,
.if-accueil--pastilles .if-accueil__btn:focus-visible i {
  background: var(--if-c-marron); color: #fff; box-shadow: 0 4px 10px -2px rgba(101, 56, 24, .35);
  transform: translateY(-2px) rotate(-6deg);
}
.if-accueil--pastilles .if-accueil__btn:hover { transform: none; }

/* --- Variante « Fourmi » ------------------------------------------------- */
.if-accueil--fourmi .if-accueil__btn { padding: 0 10px 0 4px; }
.if-accueil--fourmi .if-accueil__liste > li + li .if-accueil__btn { border-top: 1px dashed #e7e1db; }
.if-accueil--fourmi .if-accueil__btn::before {          /* trait laissé par la fourmi */
  inset: auto 0 -1px 0; height: 2px; background: var(--if-c-marron);
  transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.45, 0, .2, 1);
  z-index: 1;
}
.if-accueil--fourmi .if-accueil__btn::after {           /* la fourmi : un point qui court */
  display: block; left: 0; top: auto; bottom: -4px; margin: 0; width: 7px; height: 7px;
  background: var(--if-c-gold); box-shadow: none; opacity: 0; z-index: 2;
  transition: none;
}
.if-accueil--fourmi .if-accueil__btn:hover::before,
.if-accueil--fourmi .if-accueil__btn:focus-visible::before { transform: scaleX(1); }
.if-accueil--fourmi .if-accueil__btn:hover::after,
.if-accueil--fourmi .if-accueil__btn:focus-visible::after { animation: if-acc-fourmi .7s cubic-bezier(.45, 0, .2, 1) forwards; }
@keyframes if-acc-fourmi {
  0%   { opacity: 1; left: 0; }
  85%  { opacity: 1; }
  100% { opacity: 0; left: calc(100% - 7px); }
}
.if-accueil--fourmi .if-accueil__btn:hover { transform: none; }
.if-accueil--fourmi .if-accueil__btn:hover i { transform: translateX(3px); }

/* --- Ordinateur : filet discret entre le menu clair et les bannières ----- */
@media (min-width: 1024px) {
  .if-accueil.if-accueil--clair { border-top: 0; border-right: 1px solid #f0e6c8; box-shadow: 8px 0 24px -12px rgba(0, 0, 0, .18); z-index: 2; }
}

/* Rubrique ouverte dans la partie droite : son bouton reste « allumé » */
.if-accueil--pastilles .if-accueil__btn.is-actif { color: var(--if-c-marron); }
.if-accueil--pastilles .if-accueil__btn.is-actif::before { opacity: 1; }
.if-accueil--pastilles .if-accueil__btn.is-actif i { background: var(--if-c-marron); color: #fff; box-shadow: 0 4px 10px -2px rgba(101, 56, 24, .35); }
.if-accueil--lignes .if-accueil__btn.is-actif { color: var(--if-c-marron); }
.if-accueil--lignes .if-accueil__btn.is-actif::before { transform: scaleY(1); }
.if-accueil--fourmi .if-accueil__btn.is-actif { color: var(--if-c-marron); }
.if-accueil--fourmi .if-accueil__btn.is-actif::before { transform: scaleX(1); }
.if-accueil__btn.is-actif:not(.if-accueil--clair *)::before { transform: scaleX(1); }

/* =====================================================================
   4 ter. RUBRIQUES DANS LA PARTIE DROITE — index.php
   « Création de logo » (#accLogos), « Création graphique » (#accCreations), « Impression numérique » (#accImpressions),
   « SaaS » (#accSaas), « Formations en ligne » (#accFormations) et « Cachets automatiques » (#accCachets).
   Clic sur la rubrique dans le menu vertical : les bannières (ou la rubrique ouverte)
   s'effacent (.is-sortie), puis la rubrique prend leur place
   (.if-accueil-zone.is-rubrique + .if-formations.is-ouvert).
   Contenu (cartes, recherche, lightbox) copié de produits-services.php.
   ===================================================================== */
.if-formations { display: none; position: relative; background: #fff; padding: 26px 12px 34px; }
.if-accueil-zone.is-rubrique .if-formations.is-ouvert { display: block; order: -1; }
.if-accueil-zone.is-rubrique #heroCarousel { display: none; }
#heroCarousel { transition: opacity .3s ease, filter .3s ease; }
#heroCarousel.is-sortie { opacity: 0; filter: blur(6px); }

.if-formations__entete { text-align: center; margin: 0 0 22px; }
.if-formations__titre {
  margin: 0; color: #222;
  font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800;
  font-size: clamp(22px, 2.4vw, 32px); line-height: 1.2;   /* 04/11/2026 : réduit (avant : clamp(26px, 3vw, 40px)) */
}
.if-formations__sous {
  margin: 8px 0 0; color: #555;
  font-family: var(--if-police-corps, "Open Sans"), sans-serif; font-size: clamp(14px, 1.3vw, 16px);
}
.if-formations__barre { display: block; width: 60px; height: 3px; margin: 16px auto 0; background: var(--if-c-gold); border-radius: 2px; }

.if-formations__retour {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 2px;
  background: none; border: 0; cursor: pointer; color: #6a6560;
  font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 600; font-size: 13px;
  transition: color .2s ease;
}
.if-formations__retour i { transition: transform .25s ease; }
.if-formations__retour:hover, .if-formations__retour:focus-visible { color: var(--if-c-marron); }
.if-formations__retour:hover i { transform: translateX(-3px); }
.if-formations__retour:focus-visible { outline: 2px solid var(--if-c-marron); outline-offset: 2px; }

/* Arrivée de la rubrique : le titre monte, la barre or se dessine, puis les cartes apparaissent */
.if-formations.is-entree .if-formations__titre    { animation: if-form-monte .6s cubic-bezier(.2, .8, .2, 1) both; }
.if-formations.is-entree .if-formations__sous     { animation: if-form-monte .6s cubic-bezier(.2, .8, .2, 1) .12s both; }
.if-formations.is-entree .if-formations__barre    { animation: if-form-barre .55s cubic-bezier(.2, .8, .2, 1) .3s both; }
.if-formations.is-entree .if-formations__contenu  { animation: if-form-monte .7s cubic-bezier(.2, .8, .2, 1) .4s both; }
.if-formations.is-entree .if-formations__retour   { animation: if-form-fondu .5s ease .5s both; }
@keyframes if-form-monte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes if-form-barre { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes if-form-fondu { from { opacity: 0; } to { opacity: 1; } }

/* Retour aux bannières : même effet qu'à l'aller, en sens inverse — la rubrique s'efface
   (fondu + flou, comme les bannières à l'aller), puis la bannière réapparaît en fondu et son
   trait or, son titre et son sous-titre remontent l'un après l'autre (animations du carrousel). */
.if-formations { transition: opacity .3s ease, filter .3s ease; }
.if-formations.is-sortie { opacity: 0; filter: blur(6px); }
#heroCarousel.is-retour { animation: if-bannieres-retour .6s ease both; }
@keyframes if-bannieres-retour { from { opacity: 0; } to { opacity: 1; } }

@media (min-width: 1024px) {
  .if-accueil-zone.is-rubrique .if-formations.is-ouvert {
    order: 0; display: flex; flex-direction: column; justify-content: center;
    min-height: 0; overflow-y: auto; padding: 28px 32px 30px;
  }
  .if-formations__retour { position: absolute; top: 18px; left: 26px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #heroCarousel { transition: none; }
  .if-formations.is-entree *, .if-formations.is-sortie, #heroCarousel.is-retour { animation: none !important; }
}

/* =====================================================================
   4 quater. ICÔNE ET LIGHTBOX « INFORMATION : <titre de la rubrique> » — index.php
   Icône (i) après le titre d'une rubrique : pastille marron qui « respire »
   (onde or), pivote au survol. Lightbox : même effet qu'à l'ouverture d'une
   rubrique — voile léger SANS flou (la page reste lisible derrière), boîte qui
   monte, titre, barre or qui se dessine, paragraphes justifiés qui montent l'un
   après l'autre. Fermeture : fondu + flou de la boîte.
   ===================================================================== */
.if-formations__titre { display: inline-flex; align-items: center; justify-content: center; gap: .4em; }
.if-info-btn {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: .78em; height: .78em; min-width: 30px; min-height: 30px; padding: 0; border: 0; border-radius: 50%;
  background: var(--if-c-marron); color: #fff; cursor: pointer; font-size: inherit;
  box-shadow: 0 6px 16px -6px rgba(101, 56, 24, .55);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .25s ease;
}
.if-info-btn i { font-size: .42em; line-height: 1; }
.if-info-btn::before, .if-info-btn::after {   /* deux ondes or qui se propagent tour à tour */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--if-c-gold); opacity: 0; pointer-events: none;
  animation: if-info-onde 2.6s ease-out infinite;
}
.if-info-btn::after { animation-delay: 1.3s; }
@keyframes if-info-onde { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
.if-info-btn:hover, .if-info-btn:focus-visible { background: var(--if-c-gold); transform: rotate(-12deg) scale(1.12); outline: none; }
.if-info-btn:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--if-c-marron); }
.if-info-btn:active { transform: scale(.94); }

.if-info { position: fixed; inset: 0; z-index: 20050; display: flex; align-items: center; justify-content: center; padding: 16px; }
.if-info[hidden] { display: none; }
.if-info__voile { position: absolute; inset: 0; background: rgba(34, 22, 12, .16); }   /* voile léger, sans flou : la page reste lisible */
.if-info__boite {
  position: relative; width: 100%; max-width: 620px; max-height: calc(100svh - 32px); overflow-y: auto;
  background: #fff; border-radius: 18px; padding: 30px 30px 32px;
  box-shadow: 0 0 0 1px rgba(101, 56, 24, .08), 0 30px 80px -16px rgba(0, 0, 0, .45);   /* 06/11/2026 : liséré or du haut retiré */
}
.if-info__fermer {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: #f6f2ee; color: #8a827b; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease, transform .3s ease;
}
.if-info__fermer:hover, .if-info__fermer:focus-visible { background: #fdecec; color: #dc2626; transform: rotate(90deg); outline: none; }
.if-info__entete { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.if-info__pastille {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--if-c-marron); color: #fff; font-size: 16px;
}
.if-info__titre {
  margin: 0; color: #222; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.2;
}
.if-info__barre { display: block; width: 60px; height: 3px; margin: 16px 0 18px; background: var(--if-c-gold); border-radius: 2px; transform-origin: left; }
.if-info__texte { color: #4a4642; font-family: var(--if-police-corps, "Open Sans"), sans-serif; font-size: 15.5px; line-height: 1.7; }
.if-info__texte p { margin: 0 0 14px; text-align: justify; -webkit-hyphens: auto; hyphens: auto; }
.if-info__texte p:last-child { margin-bottom: 0; }

/* Ouverture */
.if-info.is-ouvert .if-info__voile   { animation: if-info-voile .35s ease both; }
.if-info.is-ouvert .if-info__boite   { animation: if-info-boite .55s cubic-bezier(.2, .8, .2, 1) .12s both; }
.if-info.is-ouvert .if-info__pastille { animation: if-info-pastille .6s cubic-bezier(.34, 1.56, .64, 1) .3s both; }
.if-info.is-ouvert .if-info__titre   { animation: if-form-monte .6s cubic-bezier(.2, .8, .2, 1) .35s both; }
.if-info.is-ouvert .if-info__barre   { animation: if-form-barre .55s cubic-bezier(.2, .8, .2, 1) .55s both; }
.if-info.is-ouvert .if-info__texte p { animation: if-form-monte .65s cubic-bezier(.2, .8, .2, 1) calc(.7s + var(--if-rang, 0) * .18s) both; }
@keyframes if-info-voile { from { opacity: 0; } to { opacity: 1; } }
@keyframes if-info-boite { from { opacity: 0; transform: translateY(28px) scale(.96); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes if-info-pastille { from { opacity: 0; transform: scale(.3) rotate(-90deg); } to { opacity: 1; transform: none; } }
/* Fermeture : la boîte s'efface en fondu + flou, puis le voile */
.if-info.is-sortie .if-info__boite { animation: if-info-boite-sortie .3s ease forwards; }
.if-info.is-sortie .if-info__voile { animation: if-info-voile-sortie .38s ease forwards; }
@keyframes if-info-boite-sortie { to { opacity: 0; transform: translateY(-10px) scale(.98); filter: blur(6px); } }
@keyframes if-info-voile-sortie { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .if-info-btn::before, .if-info-btn::after { animation: none; display: none; }
  .if-info.is-ouvert *, .if-info.is-sortie * { animation: none !important; }
}

/* =====================================================================
   4 quinquies. CHAMPS DE RECHERCHE DES RUBRIQUES — index.php
   D'après les champs de recherche de Kaizen Tech (admin.css, .adm-recherche),
   placés à droite au-dessus des images défilantes (27/10/2026),
   aux couleurs de la charte : champ rectangulaire à arrondi très léger (6 px) sur fond crème ; la loupe grossit et
   pivote quand on clique dans le champ ; le champ s'élargit pendant la saisie ;
   halo marron/or au focus ; bouton « Effacer » (×) qui apparaît dès qu'on tape.
   ===================================================================== */
/* Placée à droite, au-dessus des images défilantes de chaque rubrique ; le message
   « Aucun … ne correspond » s'affiche juste en dessous */
.if-recherche-zone { margin: 0 0 16px; }
.if-recherche {
  position: relative; display: block; width: 100%; max-width: 470px; margin: 0 0 0 auto;
  transition: max-width .45s cubic-bezier(.6, .1, .3, 1);
}
.if-recherche:focus-within, .if-recherche.is-remplie { max-width: 580px; }   /* s'élargit vers la gauche */
.if-recherche > i {
  position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); pointer-events: none;
  color: var(--if-c-gold); font-size: 15px;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), color .2s;
}
.if-recherche:focus-within > i { transform: translateY(-50%) scale(1.18) rotate(-12deg); color: var(--if-c-marron); }
.if-recherche input {
  width: 100%; height: 2.9rem; padding: 0 2.6rem 0 2.8rem; box-sizing: border-box;
  font-family: var(--if-police-corps, "Open Sans"), sans-serif; font-size: 14.5px; color: #222;
  border: 1.5px solid #ece4da; border-radius: 6px; background: #fbf8f4;   /* rectangulaire, arrondi très léger (style du site) */
  -webkit-appearance: none; appearance: none;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.if-recherche input::placeholder { color: #a39a90; }
.if-recherche input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.if-recherche input:focus {
  outline: none; background: #fff; border-color: var(--if-c-marron);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--if-c-gold) 18%, transparent), 0 10px 24px -16px rgba(101, 56, 24, .6);
}
.if-recherche__effacer {
  position: absolute; right: .45rem; top: 50%; width: 2rem; height: 2rem; border: 0; border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #8a827b; background: transparent; opacity: 0; pointer-events: none;
  transform: translateY(-50%) scale(.6); transition: opacity .2s, transform .25s, background-color .2s, color .2s;
}
.if-recherche.is-remplie .if-recherche__effacer { opacity: 1; pointer-events: auto; transform: translateY(-50%) scale(1); }
.if-recherche__effacer:hover, .if-recherche__effacer:focus-visible { background: #f1e9df; color: var(--if-c-marron); outline: none; }
@media (max-width: 640px) { .if-recherche, .if-recherche:focus-within, .if-recherche.is-remplie { max-width: 100%; } }

/* Back-office (dashboard-admin, produits-et-services, utilisateurs, commandes, formations-diverses) :
   même champ ; sa largeur est donnée par son conteneur.
     .if-recherche-admin (conteneur, listes) : 470 px au repos, 580 px pendant la saisie ;
     --plein : toute la largeur (fenêtre des visites) ; --compact : dans les listes déroulantes. */
.if-recherche--admin, .if-recherche--admin:focus-within, .if-recherche--admin.is-remplie { max-width: none; margin: 0; }
.if-recherche-admin { flex: 0 1 470px; max-width: 100%; transition: flex-basis .45s cubic-bezier(.6, .1, .3, 1); }
.if-recherche-admin:focus-within, .if-recherche-admin:has(.is-remplie) { flex-basis: 580px; }
/* Dashboard : la rangée « recherche + compteurs/boutons » occupe la place laissée par le titre de la liste */
.adm-liste-tete > div:has(> .if-recherche-admin) { flex: 1 1 320px; min-width: 0; justify-content: flex-end; }
.if-recherche--compact input { height: 2.4rem; padding-left: 2.4rem; font-size: 13.5px; }
.if-recherche--compact > i { left: .85rem; font-size: 13px; }
.if-recherche--compact .if-recherche__effacer { width: 1.7rem; height: 1.7rem; }
@media (max-width: 640px) { .if-recherche-admin, .if-recherche-admin:focus-within, .if-recherche-admin:has(.is-remplie) { flex-basis: 100%; } }
@media (prefers-reduced-motion: reduce) { .if-recherche-admin { transition: none; } }
@media (prefers-reduced-motion: reduce) {
  .if-recherche, .if-recherche > i, .if-recherche input, .if-recherche__effacer { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .if-accueil__liste::before, .if-accueil__question::after { animation: none; }
  .if-accueil__question::after { transform: none; }
  .if-accueil__btn, .if-accueil__btn::before, .if-accueil__btn::after, .if-accueil__btn i { transition: none; }
  .if-accueil--fourmi .if-accueil__btn:hover::after { animation: none; opacity: 0; }
  .if-accueil--lignes .if-accueil__btn > span::after { transition: none; }
}

/* =====================================================================
   5. PAGE « MON PANIER » — recapitulatif-panier.php (27/10/2026)
   Page gaie et animée, sans menu vertical :
     - fond jaune poussin très clair où flottent doucement des formes
       or, marron clair, vert et corail ;
     - en-tête : le chariot tombe et rebondit, puis se dandine de temps en
       temps ; titre qui monte ; barre or qui se dessine ;
     - carte blanche du panier qui monte, lignes du tableau qui glissent
       l'une après l'autre (premier affichage), survol jaune ;
     - « Valider mon panier » : reflet lumineux qui passe régulièrement ;
     - montants Total HT / TTC qui comptent puis pulsent (data-if-compteur) ;
     - lien « Retourner à l'accueil » : pastille maison, soulignement or qui
       se dessine, flèche qui fait signe vers la gauche ;
     - départ vers l'accueil : fondu + flou (.is-sortie), comme les rubriques.
   ===================================================================== */
.if-panier-page { background: #fffdf2; }
.if-panier {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: calc(100svh - var(--navbar-h, 78px) - 40px);
  padding: 44px 16px 64px;
  transition: opacity .3s ease, filter .3s ease;
}
.if-panier.is-sortie { opacity: 0; filter: blur(6px); }

/* --- Formes décoratives ------------------------------------------------ */
.if-panier__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.if-panier__deco span {
  position: absolute; display: block; border-radius: 50%;
  animation: if-panier-flotte 14s ease-in-out infinite alternate;
}
.if-panier__deco span:nth-child(1) { width: 180px; height: 180px; left: -50px; top: 70px;  background: color-mix(in srgb, var(--if-c-gold) 22%, transparent); }
.if-panier__deco span:nth-child(2) { width: 90px;  height: 90px;  right: 8%;  top: 40px;   background: rgba(16, 185, 129, .14); animation-duration: 11s; }
.if-panier__deco span:nth-child(3) { width: 26px;  height: 26px;  left: 22%;  top: 150px;  background: rgba(244, 114, 94, .38); animation-duration: 9s; }
.if-panier__deco span:nth-child(4) { width: 140px; height: 140px; right: -40px; bottom: 120px; background: color-mix(in srgb, var(--if-c-marron) 10%, transparent); animation-duration: 16s; }
.if-panier__deco span:nth-child(5) { width: 18px;  height: 18px;  right: 26%; top: 210px;  background: color-mix(in srgb, var(--if-c-gold) 70%, transparent); animation-duration: 8s; }
.if-panier__deco span:nth-child(6) { width: 60px;  height: 60px;  left: 10%;  bottom: 90px; border-radius: 14px; transform: rotate(18deg); background: rgba(244, 114, 94, .14); animation-duration: 12s; }
.if-panier__deco span:nth-child(7) { width: 14px;  height: 14px;  left: 46%;  bottom: 50px; background: rgba(16, 185, 129, .45); animation-duration: 7s; }
@keyframes if-panier-flotte {
  0%   { translate: 0 0; rotate: 0deg; }
  50%  { translate: 18px -22px; rotate: 12deg; }
  100% { translate: -14px 14px; rotate: -8deg; }
}

/* --- En-tête ------------------------------------------------------------ */
.if-panier__tete { text-align: center; margin: 0 auto 30px; max-width: 760px; }
.if-panier__tete-icone {
  display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 50%;
  background: #fff; color: var(--if-c-marron); font-size: 30px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--if-c-gold) 22%, transparent), 0 14px 30px -14px rgba(101, 56, 24, .55);
  animation: if-panier-tombe .9s cubic-bezier(.34, 1.56, .64, 1) .1s both, if-panier-dandine 4s ease-in-out 1.6s infinite;
}
@keyframes if-panier-tombe { from { opacity: 0; transform: translateY(-60px) scale(.6) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes if-panier-dandine {
  0%, 80%, 100% { transform: rotate(0); }
  84% { transform: rotate(-12deg) translateY(-3px); }
  88% { transform: rotate(10deg); }
  92% { transform: rotate(-6deg); }
  96% { transform: rotate(3deg); }
}
.if-panier__titre {
  margin: 16px 0 0; color: #222;
  font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12;
  animation: if-form-monte .6s cubic-bezier(.2, .8, .2, 1) .35s both;
}
.if-panier__sous {
  margin: 8px 0 0; color: #5f5a55; font-size: clamp(14px, 1.3vw, 16px);
  animation: if-form-monte .6s cubic-bezier(.2, .8, .2, 1) .48s both;
}
.if-panier__barre {
  display: block; width: 60px; height: 3px; margin: 16px auto 0; background: var(--if-c-gold); border-radius: 2px;
  animation: if-form-barre .55s cubic-bezier(.2, .8, .2, 1) .65s both;
}

/* --- Carte du panier ---------------------------------------------------- */
.if-panier__carte {
  max-width: 1280px; margin: 0 auto; background: #fff; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(101, 56, 24, .06), 0 24px 60px -30px rgba(101, 56, 24, .45);
  padding: 22px 18px 24px;
  animation: if-form-monte .7s cubic-bezier(.2, .8, .2, 1) .6s both;
}
.if-panier__defile { overflow-x: auto; }
.if-panier__table table { border-collapse: separate; border-spacing: 0; }
.if-panier__table td[data-if-compteur] { display: table-cell; }   /* le compteur animé ne doit pas sortir la cellule de sa colonne */
.if-panier__actions { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; padding: 16px 14px 4px; }
.if-panier__table thead th:first-child { border-top-left-radius: 8px; }
.if-panier__table thead th:last-child  { border-top-right-radius: 8px; }
.if-panier__table tbody tr { transition: background-color .25s ease; }
.if-panier__table tbody tr:hover { background: #fffaea; }
.if-panier__table tbody button { transition: color .2s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.if-panier__table tbody button:hover { transform: scale(1.2) rotate(-10deg); }
.if-panier.is-premier-rendu #cartTableBody tr {
  animation: if-panier-ligne .55s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.85s + var(--i, 0) * 80ms);
}
@keyframes if-panier-ligne { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* « Valider mon panier » : reflet lumineux qui passe régulièrement */
.if-panier__valider { position: relative; overflow: hidden; box-shadow: 0 10px 22px -12px rgba(101, 56, 24, .7); transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease !important; }
.if-panier__valider::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg); animation: if-panier-reflet 3.2s ease-in-out 1.8s infinite;
}
@keyframes if-panier-reflet { 0% { left: -60%; } 45%, 100% { left: 130%; } }
.if-panier__valider:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(101, 56, 24, .75); }
.if-panier__valider:hover i { animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1); }

/* --- Panier vide -------------------------------------------------------- */
.if-panier__vide { text-align: center; padding: 26px 12px 18px; }
.if-panier__vide-icone {
  display: inline-flex; align-items: center; justify-content: center; width: 96px; height: 96px; border-radius: 50%;
  background: #fff6dc; color: color-mix(in srgb, var(--if-c-marron) 70%, #fff); font-size: 40px;
  animation: if-panier-respire 3s ease-in-out infinite;
}
@keyframes if-panier-respire { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.if-panier__vide-texte { margin: 18px 0 4px; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 700; font-size: 17px; color: #3b3632; }
.if-panier__vide-aide  { margin: 0 0 20px; font-size: 14.5px; color: #6a6560; }

/* --- Lien « Retourner à l'accueil » ------------------------------------- */
.if-retour-accueil {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--if-c-marron); font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 700; font-size: 14px;
}
.if-retour-accueil__pastille {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: #fff6dc; color: var(--if-c-marron); font-size: 13px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--if-c-gold) 40%, transparent);
  transition: background .25s ease, color .25s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.if-retour-accueil__texte {
  background-image: linear-gradient(var(--if-c-gold), var(--if-c-gold));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: 2px; transition: background-size .35s cubic-bezier(.6, .1, .3, 1), color .2s ease;
}
.if-retour-accueil__fleche { order: -1; font-size: 12px; color: var(--if-c-gold); animation: if-retour-signe 2.4s ease-in-out infinite; }
@keyframes if-retour-signe { 0%, 60%, 100% { transform: translateX(0); } 70% { transform: translateX(-5px); } 80% { transform: translateX(0); } 90% { transform: translateX(-3px); } }
.if-retour-accueil:hover .if-retour-accueil__texte, .if-retour-accueil:focus-visible .if-retour-accueil__texte { background-size: 100% 2px; }
.if-retour-accueil:hover .if-retour-accueil__pastille, .if-retour-accueil:focus-visible .if-retour-accueil__pastille {
  background: var(--if-c-marron); color: #fff; transform: translateY(-2px) rotate(-8deg);
}
.if-retour-accueil:focus-visible { outline: 2px solid var(--if-c-marron); outline-offset: 4px; border-radius: 6px; }

@media (max-width: 640px) {
  .if-panier { padding: 30px 12px 48px; }
  .if-panier__carte { padding: 16px 10px 18px; }
  .if-panier__actions { align-items: center; padding: 18px 4px 4px; }
  .if-panier__actions .if-panier__valider { width: 100%; justify-content: center; }
  .if-panier__table th, .if-panier__table td { padding-left: 8px !important; padding-right: 8px !important; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .if-panier, .if-panier * { animation: none !important; }
  .if-panier { transition: none; }
}

/* --- Retour sur index.php depuis « Retourner à l'accueil » ---------------
   html.if-retour-accueil est posé dans le <head> d'index.php : les bannières
   restent cachées jusqu'à leur réapparition en fondu (.is-retour). */
html.if-retour-accueil #heroCarousel { opacity: 0; }

/* =====================================================================
   6. PAGE DE CONNEXION — connexion.php (27/10/2026)
   Fond jaune poussin très clair ; carte blanche à filet or ; en-tête avec un
   cadenas qui s'entrouvre quand on saisit, se change en coche au succès et
   tremble en cas d'échec ; champs rectangulaires à arrondi léger, fond crème,
   halo or au focus ; bouton qui passe au vert au succès.
   Messages : celui de succès porte un trait vert qui défile pendant les 4 s
   qui précèdent la redirection (même effet que les alertes du back-office,
   .adm-alerte--succes) ; celui d'erreur secoue légèrement.
   ===================================================================== */
.if-connexion-zone { background: #fffdf2; }
.if-connexion.if-connexion {
  border: 1px solid #efe6d6; border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(101, 56, 24, .04), 0 24px 50px -30px rgba(101, 56, 24, .5);
}
.if-connexion__tete { display: flex; align-items: center; gap: 12px; margin-bottom: 2px; }
.if-connexion__icone {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff6dc; color: var(--if-c-marron); font-size: 18px;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--if-c-gold) 40%, transparent);
  animation: if-info-pastille .7s cubic-bezier(.34, 1.56, .64, 1) .45s both;
  transition: background-color .35s ease, color .35s ease;
}
.if-connexion__icone i { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 70% 80%; }
.if-connexion:focus-within .if-connexion__icone i { transform: rotate(-14deg) translateY(-1px); }   /* le cadenas s'entrouvre */
.if-connexion__accroche { font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 700; font-size: 16px; color: #3b3632; }

/* Champs */
.if-connexion .pf-input {
  border-radius: 6px; border: 1.5px solid #ece4da; background: #fbf8f4; height: 2.9rem;
}
.if-connexion .pf-input:focus {
  background: #fff; border-color: var(--if-c-marron);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--if-c-gold) 18%, transparent), 0 10px 24px -16px rgba(101, 56, 24, .6);
}
.if-connexion .pf-input.border-red-500 { border-color: #ef4444; background: #fef2f2; }
.if-connexion .pf-input.border-red-500:focus { box-shadow: 0 0 0 4px rgba(239, 68, 68, .14); }
.if-connexion #pfEyeBtn i { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), color .2s ease; }
.if-connexion #pfEyeBtn:hover i { transform: scale(1.18); }

/* Bouton */
.if-connexion #pfSubmitBtn { border-radius: 6px; min-height: 3rem; }
.if-connexion #pfSubmitBtn.is-succes, .if-connexion #pfSubmitBtn.is-succes:disabled {
  background: #059669; opacity: 1; cursor: default; box-shadow: 0 10px 22px -12px rgba(5, 150, 105, .8);
}
.if-connexion #pfSubmitBtn.is-succes i { animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) both; }

/* Succès / échec sur la carte */
.if-connexion.is-succes .if-connexion__icone { background: #059669; color: #fff; box-shadow: 0 0 0 6px rgba(5, 150, 105, .15); }
.if-connexion.is-succes .if-connexion__icone i { transform: none; animation: if-info-pastille .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.if-connexion.is-refus .if-connexion__icone { animation: if-secoue .5s cubic-bezier(.36, .07, .19, .97) both; background: #fdecec; color: #dc2626; }

/* Messages */
.if-alerte { position: relative; overflow: hidden; display: flex; align-items: center; gap: .55rem; border-radius: 8px; }
.if-alerte.hidden { display: none; }
.if-alerte > i { flex: none; margin-right: 0 !important; }
.if-alerte:not(.hidden) > i { animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
.if-alerte--succes::after {          /* trait qui défile pendant les 4 s avant la redirection */
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: #059669; transform-origin: left; transform: scaleX(0);
}
.if-alerte--succes:not(.hidden)::after { animation: if-alerte-progression 4s linear forwards; }
@keyframes if-alerte-progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.if-alerte--erreur:not(.hidden) { animation: if-secoue .5s cubic-bezier(.36, .07, .19, .97) both; }

@media (prefers-reduced-motion: reduce) {
  .if-connexion__icone, .if-connexion__icone i, .if-alerte > i, .if-alerte--erreur, .if-connexion #pfSubmitBtn i { animation: none !important; transition: none !important; }
  .if-alerte--succes:not(.hidden)::after { animation-duration: .01s; }
}

/* =====================================================================
   4 sexies. LIGHTBOX « DÉTAILS DU LOGO » (index.php, rubrique « Créer un logo pour Mon Business »)
   Ouverture : voile léger (sans flou), boîte qui monte et se déplie, pastille qui tourne, puis les
   champs qui montent l'un après l'autre. Champs rectangulaires (arrondi 6 px), fond crème, halo or.
   ===================================================================== */
.dlg-btn-details {
  color: var(--if-c-marron); background: #fff; border: 2px solid var(--if-c-marron); cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
  animation: dlg-btn-appel 2.4s ease-in-out .6s 2;
}
.dlg-btn-details[hidden] { display: none; }
.dlg-btn-details:hover, .dlg-btn-details:focus-visible { background: var(--if-c-marron); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(101, 56, 24, .7); outline: none; }
.dlg-btn-details.is-valide { color: #047857; border-color: #10b981; background: #ecfdf5; animation: none; }
.dlg-btn-details.is-valide:hover { background: #059669; color: #fff; border-color: #059669; }
@keyframes dlg-btn-appel { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); } 50% { box-shadow: 0 0 0 6px rgba(255, 152, 0, .28); } }

.dlg { position: fixed; inset: 0; z-index: 20020; display: flex; align-items: center; justify-content: center; padding: 16px; }
.dlg[hidden] { display: none; }
.dlg__voile { position: absolute; inset: 0; background: rgba(34, 22, 12, .42); }
.dlg__boite {
  position: relative; width: 100%; max-width: 900px; max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain;
  background: #fff; border-radius: 18px; padding: 28px 30px 30px;   /* 06/11/2026 : liséré or du haut retiré */
  box-shadow: 0 0 0 1px rgba(101, 56, 24, .08), 0 30px 80px -16px rgba(0, 0, 0, .5);
}
.dlg__fermer {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: #f6f2ee; color: #8a827b; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s, transform .3s;
}
.dlg__fermer:hover, .dlg__fermer:focus-visible { background: #fdecec; color: #dc2626; transform: rotate(90deg); outline: none; }
.dlg__entete { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.dlg__pastille { flex: none; width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--if-c-marron); color: #fff; font-size: 19px; box-shadow: 0 10px 20px -10px rgba(101, 56, 24, .8); }
.dlg__titre { margin: 0; color: #222; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.2; }
.dlg__sous { margin: 3px 0 0; color: #8a7a6c; font-size: 13.5px; font-weight: 600; }
.dlg__barre { display: block; width: 64px; height: 3px; margin: 16px 0 20px; background: var(--if-c-gold); border-radius: 2px; transform-origin: left; }
.dlg__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; align-items: start; }   /* 2 champs par ligne */
.dlg__form > [data-dlg-champ="couleurs"], .dlg__form > .dlg-message, .dlg__form > .dlg-valider { grid-column: 1 / -1; }

/* Effet d'ouverture / fermeture */
.dlg.is-ouvert .dlg__voile { animation: if-info-voile .35s ease both; }
.dlg.is-ouvert .dlg__boite { animation: dlg-boite .6s cubic-bezier(.2, .8, .2, 1) .08s both; }
.dlg.is-ouvert .dlg__pastille { animation: if-info-pastille .6s cubic-bezier(.34, 1.56, .64, 1) .3s both; }
.dlg.is-ouvert .dlg__titre, .dlg.is-ouvert .dlg__sous { animation: if-form-monte .6s cubic-bezier(.2, .8, .2, 1) .35s both; }
.dlg.is-ouvert .dlg__barre { animation: if-form-barre .55s cubic-bezier(.2, .8, .2, 1) .5s both; }
.dlg.is-ouvert .dlg__form > :not(.dlg-champ--cond):not(.dlg-message) { animation: if-form-monte .55s cubic-bezier(.2, .8, .2, 1) both; }
.dlg.is-ouvert .dlg__form > :nth-child(1) { animation-delay: .55s; } .dlg.is-ouvert .dlg__form > :nth-child(2) { animation-delay: .63s; }
.dlg.is-ouvert .dlg__form > :nth-child(3) { animation-delay: .71s; } .dlg.is-ouvert .dlg__form > :nth-child(4) { animation-delay: .79s; }
.dlg.is-ouvert .dlg__form > :nth-child(5) { animation-delay: .87s; } .dlg.is-ouvert .dlg__form > :nth-child(6) { animation-delay: .95s; }
.dlg.is-ouvert .dlg__form > :nth-child(n+7) { animation-delay: 1.03s; }
.dlg.is-sortie .dlg__boite { animation: dlg-boite-sortie .32s ease forwards; }
.dlg.is-sortie .dlg__voile { animation: if-info-voile-sortie .32s ease forwards; }
@keyframes dlg-boite { from { opacity: 0; transform: translateY(40px) scale(.9) rotateX(8deg); } 70% { transform: translateY(-4px) scale(1.01); } to { opacity: 1; transform: none; } }
@keyframes dlg-boite-sortie { to { opacity: 0; transform: translateY(24px) scale(.96); } }

/* Champs */
.dlg-champ { display: flex; flex-direction: column; gap: 6px; }
.dlg-champ[hidden] { display: none; }
.dlg-champ.is-apparition { animation: dlg-deplie .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes dlg-deplie { from { opacity: 0; transform: translateY(-8px); max-height: 0; } to { opacity: 1; transform: none; max-height: 260px; } }
.dlg-label { font-family: var(--if-police-titre, Poppins), sans-serif; font-size: 13px; font-weight: 700; color: #2b211a; }
.dlg-requis { color: #dc2626; }
.dlg-facultatif { color: #a3958a; font-weight: 600; font-size: 12px; }
.dlg-ligne { display: flex; align-items: center; gap: 12px; }
.dlg-ligne > :first-child { flex: 1; min-width: 0; }
.dlg-input {
  width: 100%; min-height: 44px; padding: 10px 14px; border: 1.5px solid #e4d9ce; border-radius: 6px; background: #fffdf9;
  color: #2b211a; font: 500 14.5px/1.3 var(--if-police-corps, "Open Sans"), sans-serif; outline: none;
  transition: border-color .2s, box-shadow .25s, background-color .2s;
}
.dlg-input::placeholder { color: #b3a598; }
.dlg-input:hover { border-color: #d4c3b2; }
.dlg-input:focus, .dlg-input[aria-expanded="true"] { border-color: var(--if-c-gold); background: #fff; box-shadow: 0 0 0 4px rgba(255, 152, 0, .16); }
.dlg-select-wrap { position: relative; }
.dlg-select { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer; }
.dlg-select-wrap > i { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: #a3958a; font-size: 12px; pointer-events: none; transition: transform .25s; }
.dlg-select-wrap:focus-within > i { transform: translateY(-50%) rotate(180deg); color: var(--if-c-gold); }
.dlg-info-btn { font-size: 30px; flex: none; }
.dlg-cnt { align-self: flex-end; font-family: var(--if-police-titre, Poppins), sans-serif; font-size: 11.5px; font-weight: 700; color: #b3a598; transition: color .25s; }
.dlg-cnt--ok { color: #10b981; } .dlg-cnt--proche { color: #f59e0b; } .dlg-cnt--max { color: #dc2626; }
.dlg-aide { font-size: 11.5px; color: #a3958a; }
.dlg-champ.is-erreur .dlg-input, .dlg-champ.is-erreur .dlg-fichier { border-color: #dc2626; background: #fff6f6; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); }
.dlg-champ.is-erreur .dlg-label { color: #b91c1c; }
.dlg-champ.is-erreur .dlg-input, .dlg-champ.is-erreur .dlg-fichier { animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }

/* Couleurs préférées : nuancier Pantone */
.dlg-pantone { position: relative; }
.dlg-champ[data-dlg-champ="couleurs"] { position: relative; z-index: 3; }   /* le nuancier passe au-dessus des champs suivants */
.dlg-pantone__declencheur { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; cursor: pointer; padding-top: 7px; padding-bottom: 7px; }
.dlg-pantone__declencheur > i { color: #a3958a; font-size: 12px; transition: transform .25s; flex: none; }
.dlg-pantone__declencheur[aria-expanded="true"] > i { transform: rotate(180deg); color: var(--if-c-gold); }
.dlg-pantone__choix { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.dlg-pantone__vide { color: #b3a598; padding: 3px 0; }
.dlg-pantone__puce {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 4px; border-radius: 6px; background: #fff; border: 1px solid #eadfd4;
  font-size: 12.5px; font-weight: 700; color: #3b2a1e; animation: dlg-puce .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
.dlg-pantone__puce .dlg-pantone__echantillon { width: 18px; height: 18px; border-radius: 4px; }
.dlg-pantone__retirer { width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; color: #a3958a; font-size: 14px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.dlg-pantone__retirer:hover, .dlg-pantone__retirer:focus-visible { background: #fdecec; color: #dc2626; outline: none; }
@keyframes dlg-puce { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.dlg-pantone__panneau {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); padding: 10px; border-radius: 10px; background: #fff;
  border: 1px solid #eadfd4; box-shadow: 0 22px 44px -20px rgba(30, 15, 5, .5);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top; transition: opacity .2s, transform .25s cubic-bezier(.2, .8, .2, 1);
}
.dlg-pantone__panneau.is-ouvert { opacity: 1; transform: none; }
.dlg-pantone__panneau[hidden] { display: none; }
.dlg-pantone__recherche { position: relative; margin-bottom: 8px; }
.dlg-pantone__recherche i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: #b3a598; font-size: 13px; }
.dlg-pantone__recherche input { width: 100%; height: 38px; padding: 0 12px 0 32px; border: 1.5px solid #eadfd4; border-radius: 6px; background: #fffdf9; font-size: 13.5px; outline: none; }
.dlg-pantone__recherche input:focus { border-color: var(--if-c-gold); box-shadow: 0 0 0 3px rgba(255, 152, 0, .14); }
.dlg-pantone__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; max-height: 236px; overflow-y: auto; padding-right: 2px; }
.dlg-pantone__option {
  display: flex; align-items: center; gap: 8px; padding: 5px 7px; border: 1.5px solid transparent; border-radius: 7px; background: transparent;
  cursor: pointer; text-align: left; font-size: 12.5px; font-weight: 600; color: #3b2a1e; transition: background .15s, border-color .15s, transform .15s;
}
.dlg-pantone__option[hidden] { display: none; }
.dlg-pantone__option:hover:not(:disabled) { background: #fbf5ee; transform: translateX(2px); }
.dlg-pantone__option:disabled { opacity: .38; cursor: not-allowed; }
.dlg-pantone__option > i { margin-left: auto; color: #fff; font-size: 10px; width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; background: transparent; transition: background .2s; }
.dlg-pantone__option.is-choisi { border-color: var(--if-c-gold); background: #fff8ec; }
.dlg-pantone__option.is-choisi > i { background: var(--if-c-gold); }
.dlg-pantone__option.is-clic .dlg-pantone__echantillon { animation: dlg-puce .35s cubic-bezier(.34, 1.56, .64, 1); }
.dlg-pantone__echantillon { flex: none; width: 26px; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.dlg-pantone__code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-pantone__note { margin: 8px 2px 0; font-size: 11px; color: #a3958a; }
.dlg-alerte-couleurs { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; font-size: 13px; font-weight: 600; line-height: 1.45; }
.dlg-alerte-couleurs[hidden] { display: none; }
.dlg-alerte-couleurs i { margin-top: 2px; color: #f59e0b; }
.dlg-alerte-couleurs.is-visible { animation: dlg-deplie .4s cubic-bezier(.2, .8, .2, 1) both; }
.dlg-alerte-couleurs.is-visible i { animation: if-secoue .5s ease .3s both; }

/* Image d'exemple */
.dlg-fichier {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 10px 14px; border: 1.5px dashed #d8c8b8; border-radius: 6px;
  background: #fffdf9; color: #7a6a5e; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s;
}
.dlg-fichier:hover { border-color: var(--if-c-gold); background: #fff8ec; }
.dlg-fichier i { color: var(--if-c-gold); font-size: 17px; }
.dlg-fichier span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlg-fichier input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dlg-apercu { width: 112px; height: 112px; display: grid; place-items: center; border-radius: 12px; border: 1px solid #eadfd4; background: repeating-conic-gradient(#f6f1ec 0 25%, #fff 0 50%) 0 0 / 14px 14px; }
.dlg-apercu[hidden] { display: none; }
.dlg-apercu img { max-width: 100px; max-height: 100px; object-fit: contain; }
.dlg-apercu.is-apparition img { animation: dlg-puce .5s cubic-bezier(.34, 1.56, .64, 1) both; }

/* Messages et bouton Valider */
.dlg-message { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 8px; font-size: 14px; font-weight: 700; }
.dlg-message[hidden] { display: none; }
.dlg-message--erreur { color: #b91c1c; background: #fdecec; border: 1px solid #f5c2c2; }
.dlg-message--erreur.is-visible { animation: if-secoue .5s cubic-bezier(.36, .07, .19, .97) both; }
.dlg-message--succes { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.dlg-message--succes.is-visible { animation: dlg-deplie .4s ease both; }
.dlg-message--succes.is-visible > i { animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
.dlg-message--succes::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #059669; transform-origin: left; transform: scaleX(0); }
.dlg-message--succes.is-visible::after { animation: if-alerte-progression 4s linear forwards; }
.dlg-valider {
  justify-self: end; display: inline-flex; align-items: center; gap: 9px; min-width: 160px; justify-content: center; padding: 12px 26px; border: 0; border-radius: 8px;
  background: var(--if-c-marron); color: #fff; font: 700 14.5px var(--if-police-titre, Poppins), sans-serif; cursor: pointer;
  transition: background .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.dlg-valider:hover:not(:disabled), .dlg-valider:focus-visible { background: var(--if-c-gold); transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(255, 152, 0, .9); outline: none; }
.dlg-valider:disabled { opacity: .75; cursor: progress; }

/* Contenu des lightbox d'information ouvertes depuis « Détails du logo » */
.if-info.is-ouvert .if-info__texte > :not(p) { animation: if-form-monte .65s cubic-bezier(.2, .8, .2, 1) calc(.7s + var(--if-rang, 0) * .18s) both; }
.dlg-info-ligne { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px dashed #eadfd4; text-align: left !important; }
.dlg-info-ligne:last-child { border-bottom: 0; }
.dlg-info-ligne span { font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 700; color: var(--if-c-marron); }
.dlg-info-style { display: flex; gap: 16px; align-items: flex-start; padding: 12px 0; border-bottom: 1px dashed #eadfd4; }
.dlg-info-style:last-child { border-bottom: 0; }
.dlg-info-style img, .dlg-info-style__vide { flex: none; width: 100px; height: 100px; border-radius: 12px; object-fit: contain; border: 1px solid #eadfd4; background: #fff; }
.dlg-info-style__vide { display: grid; place-items: center; color: #d8cabc; font-size: 26px; }
.dlg-info-style__nom { margin: 0 0 4px !important; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800; color: #222; text-align: left !important; }
.dlg-info-riche ul, .dlg-info-riche ol { margin: 0 0 12px; padding-left: 1.4rem; }
.dlg-info-riche ul { list-style: disc; } .dlg-info-riche ol { list-style: decimal; }
.dlg-info-riche li::marker { color: var(--if-c-gold); font-weight: 700; }
.dlg-info-riche table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 14px; }
.dlg-info-riche td, .dlg-info-riche th { border: 1px solid #e0d6cc; padding: 6px 9px; vertical-align: top; }
.dlg-info-riche p { text-align: justify; }

@media (max-width: 560px) {
  .dlg__boite { padding: 24px 18px 22px; }
  .dlg-info-ligne { grid-template-columns: 1fr; gap: 2px; }
  #modalBoutons { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .dlg *, .dlg, .dlg-btn-details { animation: none !important; transition: none !important; }
}

/* « Détails du logo » (28/10/2026) : police des champs = celle de « Fonction » des cartes SaaS
   (police du corps de texte, en gras) */
.dlg-label, .dlg-input, .dlg-cnt, .dlg-aide, .dlg-fichier, .dlg-pantone__puce, .dlg-pantone__option, .dlg-pantone__recherche input,
.dlg-alerte-couleurs, .dlg-message { font-family: var(--if-police-corps, "Open Sans"), sans-serif; }
.dlg-label { font-weight: 700; font-size: 13.5px; }
.dlg-input { font-weight: 700; color: #4b5563; }
.dlg-cnt { font-weight: 700; }
@media (max-width: 720px) { .dlg__form { grid-template-columns: 1fr; } }

/* Bouton « Détails du logo » figé quand le produit est déjà dans le panier */
.dlg-btn-details:disabled { cursor: default; pointer-events: none; transform: none; box-shadow: none; animation: none; }
.dlg-btn-details:disabled:not(.is-valide) { opacity: .55; }

/* Quantité bloquée à 1 (logo, création graphique) */
.if-qte-unique { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px; background: #fff4e0; color: #b45309; font-size: 11.5px; font-weight: 700; animation: dlg-puce .4s cubic-bezier(.34, 1.56, .64, 1) both; }
.if-qte-unique[hidden] { display: none; }
#detailsModalQtySimple.is-bloque { opacity: .6; }
#detailsModalQtySimple.is-bloque button { cursor: not-allowed; }
#qtyInput.is-bloque { pointer-events: none; }

/* Lightbox d'information élargie (contenu riche : « Informations sur la baseline ») */
.if-info--large .if-info__boite { max-width: min(1040px, 100%); padding: 28px 34px 30px; }
.if-info--large .if-info__texte { font-size: 15px; line-height: 1.6; }

/* recapitulatif-panier.php : « Détails du logo » sous le produit (petit mais lisible) */
.rcp-logo { list-style: none; margin: 10px 0 2px; padding: 10px 14px; border-left: 3px solid var(--if-c-gold); border-radius: 0 8px 8px 0; background: #fffaf2;
  display: grid; gap: 5px; font-family: inherit; font-size: 13.5px; font-weight: 600; line-height: 1.45; color: #4a3b30;
  animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) .15s both; }
.rcp-logo__cle { font-weight: 700; color: var(--if-c-marron); }
/* Même police que le nom du produit (police de la cellule) pour toutes les valeurs : affichage homogène */
.rcp-logo *, .rcp-logo__val, .rcp-logo__couleur { font-family: inherit; }
.rcp-logo__val { font-weight: 600; }
.rcp-logo__val a { color: #b45309; text-decoration: underline; word-break: break-all; }
.rcp-logo__fichier { display: inline-flex; align-items: center; gap: 6px; word-break: break-all; }
.rcp-logo__fichier i { color: var(--if-c-gold); }
.rcp-logo__couleur { display: inline-flex; align-items: center; gap: 5px; margin: 0 10px 0 0; white-space: nowrap; font-weight: 600; }
.rcp-logo__echantillon { width: 13px; height: 13px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }

/* =====================================================================
   4 septies. RUBRIQUE « STUDIO GRAPHIQUE » (index.php, #accStudio)
   Copie stylisée et animée de studio.php : barre d'onglets à indicateur glissant, visuel qui se
   dévoile (rideau) puis respire lentement, images en fondu croisé, badge doré, textes en cascade
   avec lettrine. Ouverture : mêmes effets que les autres rubriques (is-entree).
   ===================================================================== */
.acc-studio .if-formations__contenu { max-width: 1120px; margin: 0 auto; padding: 0 8px; }
.acc-studio .if-formations__sous.is-change { animation: if-form-monte .45s cubic-bezier(.2, .8, .2, 1) both; }

/* Onglets */
.acc-studio__onglets {
  position: relative; display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; margin: 0 auto; max-width: 760px;
  background: #fff7ea; border: 1px solid #f1e3cc; border-radius: 14px; box-shadow: inset 0 1px 3px rgba(101, 56, 24, .06);
}
.acc-studio__indicateur {
  position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 0; border-radius: 10px;
  background: linear-gradient(135deg, var(--if-c-marron), color-mix(in srgb, var(--if-c-marron) 70%, var(--if-c-gold)));
  box-shadow: 0 10px 22px -12px rgba(101, 56, 24, .9);
  transition: transform .5s cubic-bezier(.34, 1.25, .64, 1), width .5s cubic-bezier(.34, 1.25, .64, 1), height .3s ease;
}
.acc-studio__onglet {
  position: relative; z-index: 1; flex: 1 1 150px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 14px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; white-space: nowrap;
  font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 600; font-size: 14.5px; color: #7a6a5e;
  transition: color .3s ease, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.acc-studio__onglet i { font-size: 16px; color: var(--if-c-gold); transition: color .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.acc-studio__onglet:hover:not(.is-actif) { color: var(--if-c-marron); transform: translateY(-2px); }
.acc-studio__onglet:hover:not(.is-actif) i { transform: rotate(-10deg) scale(1.15); }
.acc-studio__onglet.is-actif { color: #fff; }
.acc-studio__onglet.is-actif i { color: #ffd38a; transform: scale(1.12); }
.acc-studio__onglet:focus-visible { outline: 2px solid var(--if-c-gold); outline-offset: 2px; }

/* Corps : visuel + textes */
.acc-studio__corps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 34px; margin-top: 28px; align-items: start; }
.acc-studio__visuel {
  position: relative; margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 4 / 4.4; min-height: 300px; max-height: 520px;
  background: #f6efe6; box-shadow: 0 26px 50px -26px rgba(101, 56, 24, .6), 0 0 0 1px rgba(101, 56, 24, .06);
}
.acc-studio__image {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.1);
  transition: opacity .8s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1);
}
.acc-studio__image.is-visible { opacity: 1; transform: scale(1); animation: acc-studio-respire 14s ease-in-out 1.2s infinite alternate; }
@keyframes acc-studio-respire { from { transform: scale(1); } to { transform: scale(1.07) translate(-1.5%, -1%); } }
.acc-studio__voile { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(101, 56, 24, .55)); pointer-events: none; }
.acc-studio__visuel::after {     /* liseré or qui se dessine en bas du visuel */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--if-c-gold); transform-origin: left; transform: scaleX(0);
}
.acc-studio__badge {
  position: absolute; left: 18px; bottom: 20px; z-index: 2; padding: 7px 14px; border-radius: 999px;
  background: var(--if-c-gold); color: #fff; font-family: var(--if-police-titre, Poppins), sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45);
}
.acc-studio__badge.is-change { animation: acc-studio-badge .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes acc-studio-badge { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } }

.acc-studio__textes { position: relative; padding: 4px 0 4px 26px; }
.acc-studio__textes::before {    /* filet vertical dégradé or → transparent */
  content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, var(--if-c-gold), rgba(255, 152, 0, 0)); transform-origin: top;
}
.acc-studio__panneau { color: #4a4642; font-family: var(--if-police-corps, "Open Sans"), sans-serif; font-size: 16.5px; line-height: 1.9; text-align: justify; }
.acc-studio__panneau[hidden] { display: none; }
.acc-studio__panneau p { margin: 0 0 18px; -webkit-hyphens: auto; hyphens: auto; }
.acc-studio__panneau p:last-child { margin-bottom: 0; }
.acc-studio__panneau > p:first-child::first-letter {
  float: left; margin: 6px 10px 0 0; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800; font-size: 3.3em; line-height: .8; color: var(--if-c-gold);
}
.acc-studio__panneau.is-entree > * { animation: if-form-monte .6s cubic-bezier(.2, .8, .2, 1) calc(var(--rang, 0) * .14s) both; }

/* Ouverture de la rubrique */
.acc-studio.is-entree .if-formations__contenu { animation: none; }
.acc-studio.is-entree .acc-studio__onglets { animation: if-form-monte .6s cubic-bezier(.2, .8, .2, 1) .35s both; }
.acc-studio.is-entree .acc-studio__onglet { animation: if-form-monte .55s cubic-bezier(.2, .8, .2, 1) calc(.45s + var(--rang, 0) * .08s) both; }
.acc-studio.is-entree .acc-studio__visuel { animation: acc-studio-rideau .9s cubic-bezier(.7, 0, .2, 1) .55s both; }
.acc-studio.is-entree .acc-studio__visuel::after { animation: if-form-barre .6s cubic-bezier(.2, .8, .2, 1) 1.35s both; }
.acc-studio.is-entree .acc-studio__badge { animation: acc-studio-badge .5s cubic-bezier(.34, 1.56, .64, 1) 1.3s both; }
.acc-studio.is-entree .acc-studio__textes::before { animation: acc-studio-filet .8s cubic-bezier(.2, .8, .2, 1) .8s both; }
.acc-studio.is-entree .acc-studio__panneau:not([hidden]) > * { animation: if-form-monte .65s cubic-bezier(.2, .8, .2, 1) calc(.9s + var(--rang, 0) * .15s) both; }
.acc-studio.is-ouvert:not(.is-entree) .acc-studio__visuel::after { transform: scaleX(1); }
.acc-studio__visuel::after { transition: transform .6s ease; }
.acc-studio.is-ouvert .acc-studio__visuel::after { transform: scaleX(1); }
@keyframes acc-studio-rideau { from { clip-path: inset(0 100% 0 0 round 18px); transform: translateX(-16px); } to { clip-path: inset(0 0 0 0 round 18px); transform: none; } }
@keyframes acc-studio-filet { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media (max-width: 900px) {
  .acc-studio__corps { grid-template-columns: 1fr; gap: 24px; }
  .acc-studio__visuel { aspect-ratio: 16 / 10; min-height: 220px; }
  .acc-studio__textes { padding-left: 18px; }
}
@media (max-width: 560px) {
  .acc-studio__onglet { flex: 1 1 45%; font-size: 13px; padding: 10px 8px; }
  .acc-studio__panneau { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .acc-studio *, .acc-studio *::before, .acc-studio *::after { animation: none !important; transition: none !important; }
}

/* =====================================================================
   4 octies. RUBRIQUE « CONTACTS » (index.php, #accContacts)
   Coordonnées (encart marron à gauche, sans image) + formulaire « Nous écrire » adapté de
   kaizentech.ci (encart blanc à liseré or à droite, 2 champs par ligne). Ouverture : l'encart
   glisse depuis la gauche, le formulaire depuis la droite, coordonnées et champs en cascade.
   ===================================================================== */
.acc-contacts .if-formations__contenu { max-width: 1180px; margin: 0 auto; padding: 0 8px; }
.acc-contacts__duo { display: grid; gap: 26px; align-items: start; }
@media (min-width: 1100px) { .acc-contacts__duo { grid-template-columns: minmax(0, .78fr) minmax(0, 1.5fr); gap: 34px; align-items: stretch; } }

.acc-contacts__encart {
  position: relative; overflow: hidden; isolation: isolate; display: grid; gap: 30px; align-content: center;
  padding: 34px 30px; border-radius: 16px; color: #3b2a1e;
  /* Marron de la charte très éclairci : fond doux, textes foncés pour rester lisibles */
  background: linear-gradient(160deg, color-mix(in srgb, var(--if-c-marron) 7%, #fff8ee) 0%, color-mix(in srgb, var(--if-c-marron) 13%, #fff3e3) 100%);
  border: 1px solid color-mix(in srgb, var(--if-c-marron) 16%, #fff);
  box-shadow: 0 18px 40px -26px rgba(101, 56, 24, .45);
}
.acc-contacts__encart::before, .acc-contacts__encart::after {   /* losanges or en filigrane */
  content: ""; position: absolute; z-index: -1; border: 2px solid rgba(255, 152, 0, .28); transform: rotate(45deg); pointer-events: none;
}
.acc-contacts__encart::before { right: -60px; bottom: -60px; width: 180px; height: 180px; animation: acc-ctc-losange 9s ease-in-out infinite alternate; }
.acc-contacts__encart::after { left: -40px; top: -40px; width: 110px; height: 110px; border-color: color-mix(in srgb, var(--if-c-marron) 14%, transparent); animation: acc-ctc-losange 11s ease-in-out infinite alternate-reverse; }
@keyframes acc-ctc-losange { from { transform: rotate(45deg) scale(1); } to { transform: rotate(60deg) scale(1.12); } }
.acc-contacts__item { display: flex; gap: 16px; align-items: flex-start; }
.acc-contacts__icone {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: var(--if-c-marron); font-size: 19px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--if-c-marron) 18%, #fff), 0 6px 14px -10px rgba(101, 56, 24, .5);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .3s;
}
.acc-contacts__item:hover .acc-contacts__icone { transform: rotate(-10deg) scale(1.1); background: var(--if-c-gold); color: #fff; }
.acc-contacts__texte { min-width: 0; flex: 1; }
.acc-contacts__titre { margin: 0; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--if-c-marron); }
.acc-contacts__texte p { margin: 4px 0 0; font-size: 16px; line-height: 1.55; color: #3b2a1e; overflow-wrap: anywhere; }
.acc-contacts__texte a { color: #3b2a1e; text-decoration: none; background-image: linear-gradient(var(--if-c-gold), var(--if-c-gold)); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .35s ease, color .2s; }
.acc-contacts__texte a:hover { color: var(--if-c-marron); background-size: 100% 2px; }

.acc-contacts__formulaire {
  padding: 30px 26px 32px; background: #fff; border: 1px solid #f0e6da; border-radius: 16px;
  box-shadow: 0 22px 46px -26px rgba(101, 56, 24, .45);
}
@media (min-width: 640px) { .acc-contacts__formulaire { padding: 34px 36px 36px; } }
.acc-contacts__form-titre { margin: 0; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800; font-size: clamp(22px, 2.2vw, 28px); color: #222; }
.acc-contacts__intro { margin: 8px 0 0; color: #5f5650; font-size: 15.5px; line-height: 1.6; }
.acc-contacts__form { display: grid; gap: 16px 20px; margin-top: 0; }   /* plus de titre ni d'intro au-dessus */
@media (min-width: 640px) { .acc-contacts__form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acc-contacts__plein { grid-column: 1 / -1; }
.acc-contacts__piege { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.acc-contacts__champ { display: flex; flex-direction: column; gap: 6px; }
.acc-contacts__champ label, .acc-contacts__label { margin: 0; font-family: var(--if-police-corps, "Open Sans"), sans-serif; font-weight: 700; font-size: 14px; color: #3b2a1e; }
.acc-contacts__requis { color: #dc2626; }
.acc-contacts__champ input, .acc-contacts__champ textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid #e4d9ce; border-radius: 6px; background: #fffdf9; outline: none;
  font: 600 15px/1.45 var(--if-police-corps, "Open Sans"), sans-serif; color: #3b2a1e; transition: border-color .2s, box-shadow .25s, background .2s;
}
.acc-contacts__champ textarea { resize: vertical; min-height: 130px; }
/* Champ « Message » : éditeur TinyMCE (ifourmi-admin.js) habillé comme les autres champs du formulaire */
.acc-contacts .tox.tox-tinymce.adm-tinymce, .acc-dvs .tox.tox-tinymce.adm-tinymce { border: 1.5px solid #e4d9ce; border-radius: 6px; background: #fffdf9; transition: border-color .2s, box-shadow .25s; }
.acc-contacts .tox.tox-tinymce.adm-tinymce:hover, .acc-dvs .tox.tox-tinymce.adm-tinymce:hover { border-color: #d4c3b2; }
.acc-contacts .tox.tox-tinymce.adm-tinymce.is-focus, .acc-dvs .tox.tox-tinymce.adm-tinymce.is-focus { border-color: var(--if-c-gold); box-shadow: 0 0 0 4px rgba(255, 152, 0, .16); }
.acc-contacts__champ.is-erreur .tox.tox-tinymce.adm-tinymce, .acc-dvs .acc-awm__champ.is-erreur .tox.tox-tinymce.adm-tinymce { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220, 38, 38, .1); animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }
.acc-contacts .adm-tinymce .tox-toolbar, .acc-contacts .adm-tinymce .tox-toolbar__overflow, .acc-contacts .adm-tinymce .tox-toolbar__primary, .acc-dvs .adm-tinymce .tox-toolbar, .acc-dvs .adm-tinymce .tox-toolbar__overflow, .acc-dvs .adm-tinymce .tox-toolbar__primary { background: #fbf6ef !important; }
.acc-contacts .adm-tinymce .tox-editor-header, .acc-dvs .adm-tinymce .tox-editor-header { border-bottom: 1px solid #efe5da !important; box-shadow: none !important; padding: 0 !important; }
.acc-contacts .adm-tinymce .tox-tbtn, .acc-dvs .adm-tinymce .tox-tbtn { border-radius: 6px !important; cursor: pointer; transition: background-color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1); }
.acc-contacts .adm-tinymce .tox-tbtn svg, .acc-dvs .adm-tinymce .tox-tbtn svg { fill: #3b2a1e !important; }
.acc-contacts .adm-tinymce .tox-tbtn:hover, .acc-dvs .adm-tinymce .tox-tbtn:hover { background: #fff !important; transform: translateY(-2px); box-shadow: 0 6px 14px -10px rgba(101, 56, 24, .6); }
.acc-contacts .adm-tinymce .tox-tbtn--enabled, .acc-contacts .adm-tinymce .tox-tbtn--enabled:hover, .acc-dvs .adm-tinymce .tox-tbtn--enabled, .acc-dvs .adm-tinymce .tox-tbtn--enabled:hover { background: var(--if-c-marron) !important; }
.acc-contacts .adm-tinymce .tox-tbtn--enabled svg, .acc-dvs .adm-tinymce .tox-tbtn--enabled svg { fill: #fff !important; }
.acc-contacts__cnt.is-plein { animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }
.acc-contacts__champ input::placeholder, .acc-contacts__champ textarea::placeholder { color: #b3a598; font-weight: 500; }
.acc-contacts__champ input:hover, .acc-contacts__champ textarea:hover { border-color: #d4c3b2; }
.acc-contacts__champ input:focus, .acc-contacts__champ textarea:focus { border-color: var(--if-c-gold); background: #fff; box-shadow: 0 0 0 4px rgba(255, 152, 0, .16); }
.acc-contacts__champ.is-erreur input, .acc-contacts__champ.is-erreur textarea { border-color: #dc2626; background: #fff6f6; box-shadow: 0 0 0 4px rgba(220, 38, 38, .1); animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }
.acc-contacts__erreur { margin: 0; color: #dc2626; font-size: 13px; font-weight: 600; animation: if-form-monte .3s ease both; }
.acc-contacts__erreur[hidden] { display: none; }
.acc-contacts__cnt { align-self: flex-end; font-family: var(--if-police-titre, Poppins), sans-serif; font-size: 11.5px; font-weight: 700; color: #b3a598; }
.acc-contacts__cnt.is-ok { color: #10b981; } .acc-contacts__cnt.is-proche { color: #f59e0b; } .acc-contacts__cnt.is-max { color: #dc2626; }
.acc-contacts__bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-top: 4px; }
/* Champ « Message » rapproché de « Vérification de sécurité » (rubrique visible en entier, titre compris) */
.acc-contacts__champ[data-ctc-champ="message"] { gap: 4px; margin-bottom: -14px; }
.acc-contacts__champ[data-ctc-champ="message"] .acc-contacts__cnt { line-height: 1.2; }
.acc-contacts__captcha {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; border: 1.5px dashed #e4d9ce; border-radius: 8px; background: #fffaf2;
  font-weight: 700 !important; color: #5b4a3d !important;
}
.acc-contacts__captcha i { color: var(--if-c-gold); font-size: 17px; }
.acc-contacts__captcha input { width: 90px !important; text-align: center; padding: 8px 10px !important; }
.acc-contacts__envoyer {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 10px; padding: 14px 30px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--if-c-marron); color: #fff; font: 700 15px var(--if-police-titre, Poppins), sans-serif; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 14px 26px -14px rgba(101, 56, 24, .9); transition: background .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.acc-contacts__envoyer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); }
.acc-contacts__envoyer:hover:not(:disabled), .acc-contacts__envoyer:focus-visible { background: var(--if-c-gold); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(255, 152, 0, .9); outline: none; }
.acc-contacts__envoyer:hover:not(:disabled)::after { animation: adm-reflet-ctc .8s ease; }
.acc-contacts__envoyer:hover i { animation: acc-ctc-avion .6s ease; }
.acc-contacts__envoyer:disabled { opacity: .8; cursor: progress; }
.acc-contacts__envoyer.is-envoye i { animation: acc-ctc-avion .9s ease; }
@keyframes adm-reflet-ctc { to { transform: translateX(120%); } }
@keyframes acc-ctc-avion { 40% { transform: translate(14px, -10px) rotate(-12deg); opacity: 0; } 41% { transform: translate(-14px, 10px); opacity: 0; } 100% { transform: none; opacity: 1; } }
.acc-contacts__alerte, .acc-contacts__succes { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 13px 16px; border-radius: 8px; font-weight: 700; font-size: 14.5px; line-height: 1.45; }
.acc-contacts__alerte[hidden], .acc-contacts__succes[hidden] { display: none; }
.acc-contacts__alerte i, .acc-contacts__succes i { margin-top: 2px; }
.acc-contacts__alerte { color: #b91c1c; background: #fdecec; border: 1px solid #f5c2c2; }
.acc-contacts__alerte.is-visible { animation: if-secoue .5s cubic-bezier(.36, .07, .19, .97) both; }
.acc-contacts__succes { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.acc-contacts__succes.is-visible { animation: if-form-monte .45s ease both; }
.acc-contacts__succes.is-visible > i { animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
.acc-contacts__succes::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #059669; transform-origin: left; transform: scaleX(0); }
.acc-contacts__succes.is-visible::after { animation: if-alerte-progression 8s linear forwards; }

/* Ouverture de la rubrique */
.acc-contacts.is-entree .if-formations__contenu { animation: none; }
.acc-contacts.is-entree .acc-contacts__encart { animation: acc-ctc-gauche .75s cubic-bezier(.2, .8, .2, 1) .35s both; }
.acc-contacts.is-entree .acc-contacts__item { animation: if-form-monte .55s cubic-bezier(.2, .8, .2, 1) calc(.7s + var(--rang, 0) * .1s) both; }
.acc-contacts.is-entree .acc-contacts__formulaire { animation: acc-ctc-droite .75s cubic-bezier(.2, .8, .2, 1) .45s both; }
.acc-contacts.is-entree .acc-contacts__form > *:not(.acc-contacts__piege) { animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) both; }
.acc-contacts.is-entree .acc-contacts__form > :nth-child(3) { animation-delay: .85s; } .acc-contacts.is-entree .acc-contacts__form > :nth-child(4) { animation-delay: .92s; }
.acc-contacts.is-entree .acc-contacts__form > :nth-child(5) { animation-delay: .99s; } .acc-contacts.is-entree .acc-contacts__form > :nth-child(6) { animation-delay: 1.06s; }
.acc-contacts.is-entree .acc-contacts__form > :nth-child(n+7) { animation-delay: 1.13s; }
@keyframes acc-ctc-gauche { from { opacity: 0; transform: translateX(-34px); } to { opacity: 1; transform: none; } }
@keyframes acc-ctc-droite { from { opacity: 0; transform: translateX(34px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .acc-contacts *, .acc-contacts *::before, .acc-contacts *::after { animation: none !important; transition: none !important; } }

/* =====================================================================
   4 nonies. RUBRIQUE « RÉSERVER UN NOM DE DOMAINE » (index.php, #accDomaines)
   Vérification de disponibilité (champ + bouton « Vérifier » sur la même ligne), résultat animé,
   puis formulaire de réservation (nom-de-domaine-rubrique.php).
   ===================================================================== */
.acc-ndd { max-width: 880px; margin: 0 auto; display: grid; gap: 22px; padding: 0 8px 10px; }
.acc-ndd__carte {
  position: relative; padding: 26px 24px 24px; background: #fff; border: 1px solid #f0e6da;
  border-radius: 16px; box-shadow: 0 22px 46px -26px rgba(101, 56, 24, .45);
}
@media (min-width: 640px) { .acc-ndd__carte { padding: 30px 34px 30px; } }
.acc-ndd__label { display: block; margin: 0 0 8px; font-family: var(--if-police-corps, "Open Sans"), sans-serif; font-weight: 700; font-size: 14.5px; color: #3b2a1e; }
.acc-ndd__ext { font-weight: 600; color: #8a7564; }
.acc-ndd__requis { color: #dc2626; }
.acc-ndd__ligne { display: flex; gap: 12px; align-items: stretch; }
@media (max-width: 520px) { .acc-ndd__ligne { flex-direction: column; } }
.acc-ndd__champ {
  position: relative; flex: 1; min-width: 0; display: flex; align-items: center; border: 1.5px solid #e4d9ce; border-radius: 10px; background: #fffdf9;
  transition: border-color .2s, box-shadow .25s, background .2s;
}
.acc-ndd__champ:hover { border-color: #d4c3b2; }
.acc-ndd__champ:focus-within { border-color: var(--if-c-gold); background: #fff; box-shadow: 0 0 0 4px rgba(255, 152, 0, .16); }
.acc-ndd__champ::after {   /* soulignement or animé au focus */
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1.5px; height: 2px; border-radius: 2px; background: var(--if-c-gold);
  transform: scaleX(0); transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.acc-ndd__champ:focus-within::after { transform: scaleX(1); }
.acc-ndd__champ.is-erreur { border-color: #dc2626; background: #fff6f6; box-shadow: 0 0 0 4px rgba(220, 38, 38, .1); animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }
.acc-ndd__champ.is-erreur::after { background: #dc2626; }
.acc-ndd__globe { margin-left: 14px; color: var(--if-c-gold); font-size: 17px; transition: transform .4s; }
.acc-ndd__champ:focus-within .acc-ndd__globe { transform: rotate(-20deg) scale(1.1); }
.acc-ndd__champ.is-recherche .acc-ndd__globe { animation: acc-ndd-tourne 1.1s linear infinite; }
.acc-ndd__champ.is-recherche::before {   /* balayage lumineux pendant la recherche */
  content: ""; position: absolute; inset: 0; border-radius: 9px; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 152, 0, .14) 50%, transparent 80%); background-size: 200% 100%;
  animation: acc-ndd-balayage 1.2s linear infinite;
}
@keyframes acc-ndd-tourne { to { transform: rotate(360deg); } }
@keyframes acc-ndd-balayage { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.acc-ndd__champ input {
  flex: 1; min-width: 0; padding: 13px 14px; border: 0; outline: none; background: transparent; color: #3b2a1e;
  font: 600 16px/1.4 var(--if-police-corps, "Open Sans"), sans-serif; letter-spacing: .01em;
}
.acc-ndd__champ input::placeholder { color: #b3a598; font-weight: 500; }
.acc-ndd__champ input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.acc-ndd__champ input[type="number"]::-webkit-inner-spin-button, .acc-ndd__champ input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.acc-ndd__cnt { flex: none; margin-right: 12px; padding: 3px 8px; border-radius: 999px; background: #f6efe7; font-family: var(--if-police-titre, Poppins), sans-serif; font-size: 11.5px; font-weight: 700; color: #b3a598; transition: color .2s, background .2s; }
.acc-ndd__cnt.is-ok { color: #059669; background: #ecfdf5; } .acc-ndd__cnt.is-proche { color: #d97706; background: #fffbeb; } .acc-ndd__cnt.is-max { color: #dc2626; background: #fef2f2; }
.acc-ndd__btn, .acc-ndd__panier {
  position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 26px; min-height: 50px;
  border: 0; border-radius: 10px; cursor: pointer; background: var(--if-c-marron); color: #fff;
  font: 700 15px/1 var(--if-police-titre, Poppins), sans-serif; letter-spacing: .02em;
  box-shadow: 0 14px 26px -16px rgba(101, 56, 24, .9); transition: background .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.acc-ndd__btn::after, .acc-ndd__panier::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); }
.acc-ndd__btn:hover:not(:disabled), .acc-ndd__btn:focus-visible, .acc-ndd__panier:hover:not(:disabled), .acc-ndd__panier:focus-visible {
  background: var(--if-c-gold); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(255, 152, 0, .9); outline: none;
}
.acc-ndd__btn:hover:not(:disabled)::after, .acc-ndd__panier:hover:not(:disabled)::after { animation: acc-ndd-reflet .8s ease; }
@keyframes acc-ndd-reflet { to { transform: translateX(120%); } }
.acc-ndd__btn:disabled { cursor: progress; opacity: .9; }
.acc-ndd__panier:disabled { cursor: not-allowed; background: #9ca3af; box-shadow: none; transform: none; }
.acc-ndd__panier.is-ajout:disabled { cursor: progress; background: var(--if-c-marron); }
.acc-ndd__aide { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: #8a7564; }

/* Messages d'erreur (rouge gras sur rouge clair), animés */
.acc-ndd__msg { position: relative; display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; padding: 12px 16px; border-radius: 10px; font-weight: 700; font-size: 14.5px; line-height: 1.45; }
.acc-ndd__msg[hidden] { display: none; }
.acc-ndd__msg i { margin-top: 2px; }
.acc-ndd__msg--erreur { color: #b91c1c; background: #fdecec; border: 1px solid #f5c2c2; }
.acc-ndd__msg--info { color: #92400e; background: #fffbeb; border: 1px solid #fde68a; }
.acc-ndd__msg.is-visible { animation: acc-ndd-msg .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-ndd__msg--extension { font-size: 15.5px; border-left: 5px solid #dc2626; }
.acc-ndd__msg--extension.is-visible { animation: acc-ndd-msg .5s cubic-bezier(.34, 1.56, .64, 1) both, if-secoue .5s cubic-bezier(.36, .07, .19, .97) .45s both; }
.acc-ndd__msg--extension i { animation: acc-ndd-pulse 1.4s ease-in-out .6s 2; }
@keyframes acc-ndd-msg { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes acc-ndd-pulse { 50% { transform: scale(1.3); } }

/* Résultat « waouh » : disponible (vert) / indisponible (rouge) */
.acc-ndd__resultat {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 22px 26px; border-radius: 16px;
  font-family: var(--if-police-titre, Poppins), sans-serif;
}
.acc-ndd__resultat[hidden] { display: none; }
.acc-ndd__resultat--ok { color: #047857; background: linear-gradient(120deg, #ecfdf5, #d1fae5); border: 1.5px solid #6ee7b7; box-shadow: 0 20px 40px -24px rgba(5, 150, 105, .6); }
.acc-ndd__resultat--ko { color: #b91c1c; background: linear-gradient(120deg, #fef2f2, #fee2e2); border: 1.5px solid #fca5a5; box-shadow: 0 20px 40px -24px rgba(220, 38, 38, .55); }
.acc-ndd__resultat-texte { margin: 0; font-size: clamp(16px, 1.9vw, 21px); font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.acc-ndd__resultat-texte strong { font-weight: 800; }
.acc-ndd__resultat-icone { position: relative; flex: none; width: 58px; height: 58px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; }
.acc-ndd__resultat--ok .acc-ndd__resultat-icone { background: #059669; }
.acc-ndd__resultat--ko .acc-ndd__resultat-icone { background: #dc2626; }
.acc-ndd__resultat-icone::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid currentColor; opacity: 0; }
.acc-ndd__resultat--ok .acc-ndd__resultat-icone::after { color: #34d399; }
.acc-ndd__resultat--ko .acc-ndd__resultat-icone::after { color: #f87171; }
.acc-ndd__resultat.is-visible { animation: acc-ndd-entree .7s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-ndd__resultat--ko.is-visible { animation: acc-ndd-entree .6s cubic-bezier(.34, 1.56, .64, 1) both, if-secoue .55s cubic-bezier(.36, .07, .19, .97) .55s both; }
.acc-ndd__resultat.is-visible .acc-ndd__resultat-icone { animation: acc-ndd-icone .7s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
.acc-ndd__resultat.is-visible .acc-ndd__resultat-icone::after { animation: acc-ndd-onde 1.3s ease-out .5s 2; }
.acc-ndd__resultat.is-visible .acc-ndd__resultat-texte { animation: if-form-monte .55s cubic-bezier(.2, .8, .2, 1) .3s both; }
.acc-ndd__resultat.is-visible::before {   /* reflet qui traverse la bannière */
  content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%);
  transform: translateX(-120%); animation: acc-ndd-reflet 1.1s ease .55s both;
}
.acc-ndd__resultat--ok::after {   /* barre de progression : 4 s avant le formulaire */
  content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: #059669; transform-origin: left; transform: scaleX(0);
}
.acc-ndd__resultat--ok.is-visible::after { animation: if-alerte-progression 4s linear forwards; }
.acc-ndd__resultat.is-sortie { animation: acc-ndd-sortie .42s ease forwards; }
@keyframes acc-ndd-entree { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes acc-ndd-icone { from { transform: scale(0) rotate(-180deg); } to { transform: none; } }
@keyframes acc-ndd-onde { from { opacity: .9; transform: scale(.9); } to { opacity: 0; transform: scale(1.7); } }
@keyframes acc-ndd-sortie { to { opacity: 0; transform: translateY(-12px) scale(.96); } }
/* Éclats de confettis (disponible uniquement) */
.acc-ndd__eclats { position: absolute; left: 47px; top: 50%; width: 0; height: 0; pointer-events: none; }
.acc-ndd__resultat--ko .acc-ndd__eclats { display: none; }
.acc-ndd__eclats i { position: absolute; width: 8px; height: 8px; border-radius: 2px; opacity: 0; }
.acc-ndd__eclats i:nth-child(odd) { background: #34d399; } .acc-ndd__eclats i:nth-child(even) { background: var(--if-c-gold); border-radius: 50%; }
.acc-ndd__resultat.is-visible .acc-ndd__eclats i { animation: acc-ndd-eclat .9s cubic-bezier(.2, .8, .2, 1) .35s both; }
.acc-ndd__eclats i:nth-child(1) { --x: 70px;  --y: -46px; } .acc-ndd__eclats i:nth-child(2) { --x: 96px;  --y: -6px; }
.acc-ndd__eclats i:nth-child(3) { --x: 64px;  --y: 42px; }  .acc-ndd__eclats i:nth-child(4) { --x: -6px;  --y: 58px; }
.acc-ndd__eclats i:nth-child(5) { --x: -52px; --y: 34px; }  .acc-ndd__eclats i:nth-child(6) { --x: -40px; --y: -48px; }
.acc-ndd__eclats i:nth-child(7) { --x: 8px;   --y: -64px; } .acc-ndd__eclats i:nth-child(8) { --x: 128px; --y: 28px; }
@keyframes acc-ndd-eclat { 0% { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(200deg); } }

/* Formulaire de réservation */
.acc-ndd__commande.is-apparition { animation: acc-ndd-entree .7s cubic-bezier(.2, .8, .2, 1) both; }
.acc-ndd__commande.is-apparition .acc-ndd__bloc { animation: if-form-monte .55s cubic-bezier(.2, .8, .2, 1) both; }
.acc-ndd__commande.is-apparition .acc-ndd__bloc + .acc-ndd__bloc { animation-delay: .1s; }
.acc-ndd__commande-titre { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800; font-size: 18px; color: var(--if-c-marron); }
.acc-ndd__commande-titre i { color: var(--if-c-gold); }
.acc-ndd__grille { display: grid; gap: 16px 20px; }
@media (min-width: 640px) { .acc-ndd__grille { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.acc-ndd__prix { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-top: 16px; padding: 12px 16px; border: 1.5px dashed #e4d9ce; border-radius: 10px; background: #fffaf2; color: #5f5650; font-size: 14px; font-weight: 600; }
.acc-ndd__prix[hidden] { display: none; }
.acc-ndd__prix strong { font-family: var(--if-police-titre, Poppins), sans-serif; font-size: 19px; font-weight: 800; color: var(--if-c-marron); }
.acc-ndd__succes { margin-top: 14px; padding: 10px 16px; border: 1px solid #6ee7b7; border-radius: 10px; background: #ecfdf5; color: #047857; text-align: center; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 700; font-size: 14px; animation: acc-ndd-msg .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-ndd__succes i { margin-right: 7px; }
.acc-ndd__actions { display: flex; justify-content: flex-end; margin-top: 18px; }
@media (max-width: 520px) { .acc-ndd__actions .acc-ndd__panier { width: 100%; } }
.acc-ndd__btn:disabled.is-recherche { background: var(--if-c-marron); }
/* Pack annuel Domaine + Emails (29/10/2026) */
.acc-ndd__carte--simple { border-top: 1px solid #f0e6da; }          /* sans liseré or au-dessus de l'encart */
.acc-ndd__commande-titre span { line-height: 1.4; }
.acc-ndd__commande-titre strong { color: #3b2a1e; overflow-wrap: anywhere; }
.acc-ndd__commande-titre .acc-ndd__prix-titre { display: inline-block; color: var(--if-c-gold); white-space: nowrap; }
.acc-ndd__prix-titre.is-maj { animation: acc-ndd-prix .5s cubic-bezier(.34, 1.56, .64, 1); }
.acc-ndd__commande-titre .acc-ndd__domaine-titre { color: var(--if-c-gold); }
.acc-ndd__prix.is-maj strong { display: inline-block; animation: acc-ndd-prix .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes acc-ndd-prix { 0% { transform: scale(.8); opacity: .3; } 100% { transform: none; opacity: 1; } }
@media (min-width: 640px) { .acc-ndd__grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acc-ndd__emails { margin-top: 16px; }
.acc-ndd__emails:empty { display: none; }
.acc-ndd__email.is-apparition { animation: if-form-monte .45s cubic-bezier(.2, .8, .2, 1) calc(var(--rang, 0) * .06s) both; }
.acc-ndd__select { position: relative; }
.acc-ndd__select select {
  width: 100%; appearance: none; -webkit-appearance: none; padding: 13px 42px 13px 14px; border: 1.5px solid #e4d9ce; border-radius: 10px; background: #fffdf9;
  font: 600 15.5px/1.4 var(--if-police-corps, "Open Sans"), sans-serif; color: #3b2a1e; cursor: pointer; outline: none;
  transition: border-color .2s, box-shadow .25s, background .2s;
}
.acc-ndd__select select:hover { border-color: #d4c3b2; }
.acc-ndd__select select:focus { border-color: var(--if-c-gold); background: #fff; box-shadow: 0 0 0 4px rgba(255, 152, 0, .16); }
.acc-ndd__select i { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: var(--if-c-gold); font-size: 13px; pointer-events: none; transition: transform .3s; }
.acc-ndd__select select:focus + i { transform: translateY(-50%) rotate(180deg); }
.acc-ndd__actions { gap: 12px; flex-wrap: wrap; }
.acc-ndd__annuler {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border: 0; border-radius: 10px; cursor: pointer;
  background: #9ca3af; color: #fff; font: 700 15px/1 var(--if-police-titre, Poppins), sans-serif; letter-spacing: .02em;
  transition: background .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
.acc-ndd__annuler:hover, .acc-ndd__annuler:focus-visible { background: #6b7280; transform: translateY(-2px); outline: none; }
@media (max-width: 520px) { .acc-ndd__actions .acc-ndd__annuler { width: 100%; } }
.acc-ndd__verif.is-apparition { animation: acc-ndd-entree .6s cubic-bezier(.2, .8, .2, 1) both; }
.acc-ndd__verif.is-sortie, .acc-ndd__commande.is-sortie { animation: acc-ndd-sortie .4s ease forwards; }
@media (prefers-reduced-motion: reduce) { .acc-ndd *, .acc-ndd *::before, .acc-ndd *::after { animation: none !important; transition: none !important; } }

/* =====================================================================
   4 decies. RUBRIQUE « CRÉER UN SITE WEB POUR MON BUSINESS » (index.php, #accSites)
   Présentation (table `siteweb`, id 1) puis configurateur par étapes (id 2 : Forfait socle de base).
   ===================================================================== */
.acc-sw { max-width: 880px; margin: 0 auto; padding: 0 8px 10px; }
.acc-sw__carte {
  position: relative; overflow: hidden; padding: 30px 26px 26px; background: #fff; border: 1px solid #f0e6da; border-radius: 18px;
  box-shadow: 0 22px 46px -26px rgba(101, 56, 24, .45);
}
@media (min-width: 640px) { .acc-sw__carte { padding: 38px 42px 32px; } }
.acc-sw__carte::before {   /* halo or discret en haut à droite */
  content: ""; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 152, 0, .14), transparent 70%);
}
.acc-sw__carte[hidden] { display: none; }
.acc-sw__carte.is-apparition { animation: acc-sw-entree .65s cubic-bezier(.2, .8, .2, 1) both; }
.acc-sw__carte.is-apparition .acc-sw__titre { animation: if-form-monte .55s cubic-bezier(.2, .8, .2, 1) .12s both; }
.acc-sw__carte.is-apparition .acc-sw__texte { animation: if-form-monte .55s cubic-bezier(.2, .8, .2, 1) .22s both; }
.acc-sw__carte.is-apparition .acc-sw__actions, .acc-sw__carte.is-apparition .acc-sw__pied { animation: if-form-monte .55s cubic-bezier(.2, .8, .2, 1) .32s both; }
.acc-sw__carte.is-sortie { animation: acc-sw-sortie .3s ease forwards; }
@keyframes acc-sw-entree { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes acc-sw-sortie { to { opacity: 0; transform: translateY(-14px) scale(.98); } }
.acc-sw__pastille {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 12px;
  background: linear-gradient(135deg, var(--if-c-marron), color-mix(in srgb, var(--if-c-marron) 70%, #000)); color: var(--if-c-gold); font-size: 18px;
  box-shadow: 0 14px 26px -14px rgba(101, 56, 24, .9);
}
.acc-sw__intro.is-apparition .acc-sw__pastille { animation: if-info-pastille .6s cubic-bezier(.34, 1.56, .64, 1) .05s both; }
.acc-sw__titre { margin: 0; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.3; color: var(--if-c-marron); }
/* Présentation : icône puis titre sur la même ligne */
.acc-sw__entete { display: flex; align-items: center; gap: 12px; }
.acc-sw__entete .acc-sw__pastille { flex: none; margin-bottom: 0; }
.acc-sw__texte { margin-top: 14px; color: #4a3b30; font-size: 16px; line-height: 1.75; text-align: justify; }
.acc-sw__texte p { margin: 0 0 .75em; } .acc-sw__texte p:last-child { margin-bottom: 0; }
.acc-sw__texte strong { color: var(--if-c-marron); }
.acc-sw__texte ul, .acc-sw__texte ol { margin: 0 0 .75em; padding-left: 1.4em; }
.acc-sw__texte ul { list-style: disc; } .acc-sw__texte ol { list-style: decimal; }
.acc-sw__texte li::marker { color: var(--if-c-gold); font-weight: 700; }
.acc-sw__etape-num { margin: 0 0 12px; }
.acc-sw__etape-num span {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: #fff3e0; color: #c26e00;
  font-family: var(--if-police-titre, Poppins), sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.acc-sw__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px dashed #e8dccf; }
.acc-sw__prix { margin: 0; font-size: 15px; font-weight: 600; color: #5f5650; }
.acc-sw__prix strong { font-family: var(--if-police-titre, Poppins), sans-serif; font-size: 17px; font-weight: 800; color: var(--if-c-marron); }
.acc-sw__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.acc-sw__pied .acc-sw__actions { margin-top: 0; }
.acc-sw__actions--centre { justify-content: flex-start; }
.acc-sw__btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 26px;
  border: 0; border-radius: 10px; cursor: pointer; color: #fff; font: 700 15px/1 var(--if-police-titre, Poppins), sans-serif; letter-spacing: .02em;
  transition: background .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, opacity .25s;
}
.acc-sw__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); }
.acc-sw__btn:hover:not(:disabled)::after { animation: acc-ndd-reflet .8s ease; }
.acc-sw__btn--principal, .acc-sw__btn--suivant.is-pret { background: var(--if-c-marron); box-shadow: 0 14px 26px -16px rgba(101, 56, 24, .9); }
.acc-sw__btn--principal:hover, .acc-sw__btn--suivant.is-pret:hover:not(:disabled) { background: var(--if-c-gold); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(255, 152, 0, .9); }
.acc-sw__btn--principal i { transition: transform .4s; }
.acc-sw__btn--principal:hover i { transform: rotate(90deg); }
.acc-sw__btn--valider { background: #16a34a; box-shadow: 0 14px 26px -16px rgba(22, 163, 74, .9); }
.acc-sw__btn--valider:hover:not(:disabled) { background: #14532d; transform: translateY(-2px); }
.acc-sw__btn--valider.is-valide, .acc-sw__btn--valider.is-valide:disabled { background: #ecfdf5; color: #047857; box-shadow: inset 0 0 0 1.5px #6ee7b7; cursor: default; opacity: 1; }
.acc-sw__btn--valider.is-valide i { animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-sw__btn--valider:disabled:not(.is-valide) { cursor: progress; opacity: .85; }
.acc-sw__btn--suivant:disabled { background: #d1d5db; color: #fff; box-shadow: none; cursor: not-allowed; }
.acc-sw__btn--suivant.is-pret { animation: acc-sw-pret .6s cubic-bezier(.34, 1.56, .64, 1); }
.acc-sw__btn--suivant.is-pret i { animation: acc-sw-fleche 1.2s ease-in-out .6s 2; }
@keyframes acc-sw-pret { 40% { transform: scale(1.08); } }
@keyframes acc-sw-fleche { 50% { transform: translateX(5px); } }
.acc-sw__btn--retour { background: #9ca3af; }
.acc-sw__btn--retour:hover { background: #6b7280; transform: translateY(-2px); }
@media (max-width: 520px) { .acc-sw__pied, .acc-sw__actions { flex-direction: column; align-items: stretch; } .acc-sw__btn { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .acc-sw *, .acc-sw *::before, .acc-sw *::after { animation: none !important; transition: none !important; } }

/* Étape 2 « Types de site » : choix unique (boutons radio stylisés) */
.acc-sw__choix { display: grid; gap: 12px; margin-top: 18px; }
@media (min-width: 700px) { .acc-sw__choix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acc-sw__option {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 15px 16px; border: 1.5px solid #ece2d6; border-radius: 14px; background: #fffdf9;
  cursor: pointer; transition: border-color .25s, background .25s, box-shadow .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.acc-sw__carte.is-apparition .acc-sw__option { animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--rang, 0) * .06s) both; }
.acc-sw__option:hover { border-color: #e2c9a6; transform: translateY(-2px); box-shadow: 0 14px 26px -20px rgba(101, 56, 24, .6); }
.acc-sw__option input { position: absolute; opacity: 0; pointer-events: none; }
.acc-sw__option-pastille {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #d9c7b3; display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: 11px; transition: background .25s, border-color .25s, color .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.acc-sw__option-nom { flex: 1; min-width: 0; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 700; font-size: 15px; color: #3b2a1e; }
.acc-sw__option-prix { flex: none; font-weight: 700; font-size: 13.5px; color: #8a7564; white-space: nowrap; }
.acc-sw__option:has(input:checked) { border-color: var(--if-c-gold); background: #fff8ec; box-shadow: 0 0 0 4px rgba(255, 152, 0, .14), 0 16px 30px -22px rgba(255, 152, 0, .9); }
.acc-sw__option:has(input:checked) .acc-sw__option-pastille { background: var(--if-c-gold); border-color: var(--if-c-gold); color: #fff; transform: scale(1.12); }
.acc-sw__option:has(input:checked) .acc-sw__option-prix { color: var(--if-c-marron); }
.acc-sw__option:has(input:focus-visible) { outline: 3px solid rgba(255, 152, 0, .5); outline-offset: 2px; }
/* Étape « Hébergement Web annuel » : carte d'offre avec nom court (badge) + description saisie dans le back-office (12/11/2026) */
.acc-sw__option--offre { align-items: flex-start; padding: 18px 18px 16px; overflow: hidden; }
.acc-sw__option--offre .acc-sw__option-pastille { margin-top: 2px; }
.acc-sw__offre-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.acc-sw__option--offre .acc-sw__option-prix { padding: 4px 10px; border-radius: 999px; background: #f6efe6; transition: background .25s, color .25s; }
.acc-sw__option--offre:has(input:checked) .acc-sw__option-prix { background: var(--if-c-gold); color: #fff; }
.acc-sw__option--offre::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-18deg); }
.acc-sw__option--offre:hover::after { animation: acc-sw-reflet .9s ease; }
@keyframes acc-sw-reflet { to { left: 130%; } }
.acc-sw__offre-badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
  background: linear-gradient(135deg, #fff1d6, #ffe2ad); color: var(--if-c-marron, #653818); font-size: 13px; font-weight: 800; letter-spacing: .02em;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
.acc-sw__offre-badge .fas { color: var(--if-c-gold); font-size: 12px; }
.acc-sw__option--offre:hover .acc-sw__offre-badge, .acc-sw__option--offre:has(input:checked) .acc-sw__offre-badge { transform: translateY(-1px) scale(1.04); box-shadow: 0 8px 16px -10px rgba(255, 152, 0, .9); }
.acc-sw__offre-texte { display: block; font-family: var(--if-police-corps, 'Open Sans'), sans-serif; font-weight: 400; font-size: 14px; line-height: 1.55; color: #5b4a3d; }
.acc-sw__offre-texte p { margin: 0 0 4px; }
.acc-sw__offre-texte p:last-child { margin-bottom: 0; }
.acc-sw__offre-texte strong, .acc-sw__offre-texte b { color: #3b2a1e; font-weight: 700; }
.acc-sw__offre-texte ul, .acc-sw__offre-texte ol { margin: 4px 0 0; padding-left: 1.2em; }
.acc-sw__offre-texte ul { list-style: disc; }
.acc-sw__offre-texte ol { list-style: decimal; }
.acc-sw__offre-texte li { margin: 2px 0; }
.acc-sw__offre-texte ul li::marker { color: var(--if-c-gold); }
@media (prefers-reduced-motion: reduce) { .acc-sw__option--offre:hover::after { animation: none; } }
.acc-sw__choix-aide { margin: 12px 0 0; font-size: 13px; color: #8a7564; }
.acc-sw__choix-aide[hidden] { display: none; }
.acc-sw__valide { color: #047857; font-weight: 700; font-size: 13px; margin-left: 6px; }

/* Lightbox « Type de site : … » (effet waouh) */
.acc-sw-lb { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 18px; }
.acc-sw-lb[hidden] { display: none; }
.acc-sw-lb__fond { position: absolute; inset: 0; background: rgba(40, 22, 10, .45); opacity: 0; transition: opacity .3s; }   /* voile simple, sans flou */
.acc-sw-lb__succes { margin-top: 16px; padding: 12px 16px; border: 1px solid #6ee7b7; background: #ecfdf5; color: #047857; font-weight: 700; font-size: 14.5px; }
.acc-sw-lb__succes:not(.hidden) { animation: acc-ndd-msg .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-sw-lb.is-open .acc-sw-lb__fond { opacity: 1; }
.acc-sw-lb__boite {
  position: relative; width: min(760px, 100%); max-height: calc(100vh - 36px); overflow: auto; padding: 34px 30px 26px; border-radius: 22px; background: #fff;
  box-shadow: 0 40px 90px -30px rgba(40, 22, 10, .7);   /* 06/11/2026 : liséré or du haut retiré */ opacity: 0; transform: translateY(30px) scale(.9);
}
@media (min-width: 640px) { .acc-sw-lb__boite { padding: 40px 42px 30px; } }
.acc-sw-lb.is-open .acc-sw-lb__boite { animation: acc-sw-lb-entree .6s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-sw-lb.is-closing .acc-sw-lb__boite { animation: acc-sw-lb-sortie .28s ease forwards; }
.acc-sw-lb.is-closing .acc-sw-lb__fond { opacity: 0; }
@keyframes acc-sw-lb-entree { 0% { opacity: 0; transform: translateY(40px) scale(.85) rotate(-1.5deg); } 70% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes acc-sw-lb-sortie { to { opacity: 0; transform: translateY(18px) scale(.95); } }
.acc-sw-lb.is-open .acc-sw-lb__sur, .acc-sw-lb.is-open .acc-sw-lb__titre { animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) .15s both; }
.acc-sw-lb.is-open .acc-sw-lb__texte { animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) .25s both; }
.acc-sw-lb.is-open .acc-sw-lb__pied { animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) .35s both; }
.acc-sw-lb__fermer {
  position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f6efe7; color: #5f5650; cursor: pointer;
  transition: background .2s, transform .3s;
}
.acc-sw-lb__fermer:hover { background: #fde8c8; color: var(--if-c-marron); transform: rotate(90deg); }
.acc-sw-lb__sur { margin: 0; font-family: var(--if-police-titre, Poppins), sans-serif; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #c26e00; }
.acc-sw-lb__titre { margin: 6px 40px 0 0; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.3; color: var(--if-c-marron); }
.acc-sw-lb__texte { margin-top: 16px; }
.acc-sw-lb__pied { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 18px; border-top: 1px dashed #e8dccf; }
.acc-sw-lb__montants p { margin: 0; font-size: 14.5px; font-weight: 600; color: #5f5650; line-height: 1.7; }
.acc-sw-lb__montants strong { font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800; color: var(--if-c-marron); }
.acc-sw-lb__montants p + p strong { font-size: 19px; color: #c26e00; }
.acc-sw-lb__pied .acc-sw__actions { margin-top: 0; }
/* Éclats dorés à l'ouverture */
.acc-sw-lb__eclats { position: absolute; left: 50%; top: 0; width: 0; height: 0; pointer-events: none; }
.acc-sw-lb__eclats i { position: absolute; width: 9px; height: 9px; border-radius: 2px; opacity: 0; background: var(--if-c-gold); }
.acc-sw-lb__eclats i:nth-child(even) { background: var(--if-c-marron); border-radius: 50%; }
.acc-sw-lb.is-open .acc-sw-lb__eclats i { animation: acc-sw-eclat 1s cubic-bezier(.2, .8, .2, 1) .25s both; }
.acc-sw-lb__eclats i:nth-child(1) { --x: -160px; --y: 40px; } .acc-sw-lb__eclats i:nth-child(2) { --x: 150px; --y: 60px; }
.acc-sw-lb__eclats i:nth-child(3) { --x: -90px;  --y: 110px; } .acc-sw-lb__eclats i:nth-child(4) { --x: 100px; --y: 120px; }
.acc-sw-lb__eclats i:nth-child(5) { --x: -220px; --y: 90px; } .acc-sw-lb__eclats i:nth-child(6) { --x: 230px; --y: 30px; }
.acc-sw-lb__eclats i:nth-child(7) { --x: -30px;  --y: 150px; } .acc-sw-lb__eclats i:nth-child(8) { --x: 40px;  --y: 90px; }
@keyframes acc-sw-eclat { 0% { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(220deg); } }
html.acc-sw-lb-ouverte { overflow: hidden; }
@media (max-width: 520px) { .acc-sw-lb__pied { flex-direction: column; align-items: stretch; } }
@media (prefers-reduced-motion: reduce) { .acc-sw-lb *, .acc-sw-lb__boite { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } }
/* Étape 2 : rappel du type choisi, un peu plus discret que le prix des étapes */
#swEtape2Resume strong { font-size: 15px; }
/* Étape 3 « Gestion des Utilisateurs & Droits » : cases à cocher (choix multiple) */
.acc-sw__option--case .acc-sw__option-pastille { border-radius: 7px; }
.acc-sw__choix[hidden] { display: none; }
#swEtape3Resume strong { font-size: 15px; }
.acc-sw__global { display: block; margin-top: 4px; font-size: 14px; }
.acc-sw__global b { font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800; color: #c26e00; }
/* Étape 3 : option obligatoire = bouton radio (pastille ronde) + badge */
.acc-sw__option--oblig .acc-sw__option-pastille { border-radius: 50%; }
.acc-sw__badge-oblig { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #fef2f2; color: #b91c1c;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; }
/* Site Web : « Ajouter au panier » de la dernière étape (même bouton et même message que « Obtenir un domaine et des emails ») */
.acc-sw__panier { width: auto; }
.acc-sw__succes { margin-top: 14px; }
.rcp-logo__prix { font-weight: 500; color: #8a7564; white-space: nowrap; }

/* Accueil : liens « Mentions légales | Politique de confidentialité » tout en bas du menu vertical */
.if-accueil__legal { margin: 26px 0 0; text-align: center; font-size: 12.5px; color: #b3a596; }
.if-accueil__legal a { color: #8a7564; font-weight: 700; text-decoration: none; transition: color .2s ease; }
.if-accueil__legal a:hover, .if-accueil__legal a:focus-visible { color: var(--if-c-gold); }
.if-accueil__legal span { margin: 0 8px; }
@media (min-width: 1024px) {
  /* menu centré verticalement dans l'espace libre, liens collés en bas de la colonne (sans chevauchement) */
  .if-accueil:has(.if-accueil__legal) { flex-direction: column; align-items: stretch; padding-bottom: 14px; }
  .if-accueil:has(.if-accueil__legal) .if-accueil__boite { margin: clamp(10px, 3.2vh, 34px) 0 auto; }   /* 08/11/2026 : menu en haut de l’encart (13e rubrique) ; 09/11/2026 : légèrement redescendu */
  .if-accueil__legal { margin: 18px 0 0; flex: none; }
}

/* =====================================================================
   4 undecies. RUBRIQUE « CRÉER UNE APPLICATION WEB MÉTIER » (index.php, #accApplications) — 04/11/2026
   Formulaire « Votre Projet d'Application Web Métier » en 6 étapes (application-web-rubrique.php) :
   barre d'étapes (rail or qui se remplit), étapes qui glissent, choix en tuiles (radio / cases),
   compteurs colorisés, erreurs (bordure rouge + secousse), focus or, remerciement animé.
   ===================================================================== */
.acc-awm { max-width: 940px; margin: 0 auto; padding: 0 8px 10px; }
.acc-awm__carte {
  position: relative; overflow: hidden; overflow: clip; padding: 30px 22px 26px;   /* clip : coupe le halo sans empêcher la barre de navigation collante */ background: #fff; border: 1px solid #f0e6da;
  border-radius: 18px; box-shadow: 0 22px 46px -26px rgba(101, 56, 24, .45);
}
@media (min-width: 640px) { .acc-awm__carte { padding: 40px 44px 32px; } }
.acc-awm__carte::before {   /* halo or discret en haut à droite (comme la rubrique Site Web) */
  content: ""; position: absolute; right: -90px; top: -90px; width: 240px; height: 240px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 152, 0, .14), transparent 70%);
}
.acc-awm__carte[hidden] { display: none; }
.acc-awm__carte.is-apparition { animation: acc-sw-entree .65s cubic-bezier(.2, .8, .2, 1) both; }
.acc-awm__carte.is-sortie { animation: acc-sw-sortie .3s ease forwards; }

/* En-tête */
.acc-awm__entete { position: relative; display: flex; gap: 16px; align-items: flex-start; }
.acc-awm__pastille {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px;
  background: linear-gradient(135deg, var(--if-c-marron), color-mix(in srgb, var(--if-c-marron) 70%, #000)); color: var(--if-c-gold); font-size: 19px;
  box-shadow: 0 14px 26px -14px rgba(101, 56, 24, .9);
}
.if-formations.is-entree .acc-awm__pastille { animation: if-info-pastille .6s cubic-bezier(.34, 1.56, .64, 1) .5s both; }
.acc-awm__titre { margin: 2px 0 0; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800; font-size: clamp(17px, 1.7vw, 21px); line-height: 1.3; color: var(--if-c-marron); }
.acc-awm__intro { margin: 8px 0 0; color: #5f5650; font-size: 15px; line-height: 1.65; text-align: justify; }
@media (max-width: 639px) {
  .acc-awm__entete { flex-wrap: wrap; align-items: center; }
  .acc-awm__entete > div { display: contents; }
  .acc-awm__titre { flex: 1; min-width: 0; margin: 0; }
  .acc-awm__intro { flex-basis: 100%; text-align: left; }
}

/* Barre d'étapes */
.acc-awm__etapes { position: relative; margin: 32px 0 30px; scroll-margin-top: 16px; }
.acc-awm__etapes ol { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.acc-awm__rail { position: absolute; top: 20px; left: calc(100% / 12); right: calc(100% / 12); height: 4px; border-radius: 4px; background: #f1e7dc; overflow: hidden; }
.acc-awm__rail-plein {
  display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--if-c-marron), var(--if-c-gold)); transition: transform .6s cubic-bezier(.65, 0, .35, 1);
}
.acc-awm__puce {
  display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--if-police-titre, Poppins), sans-serif;
}
.acc-awm__puce-rond {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 2px solid #e4d9ce; color: #b3a598; font-size: 16px;
  transition: background .3s, border-color .3s, color .3s, transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s;
}
.acc-awm__puce-ok { display: none; }
.acc-awm__puce-nom { font-size: 12px; font-weight: 700; color: #a39385; text-align: center; line-height: 1.2; transition: color .3s; }
.acc-awm__puce:hover .acc-awm__puce-rond { transform: translateY(-3px); border-color: #e2c9a6; }
.acc-awm__puce:focus-visible { outline: none; }
.acc-awm__puce:focus-visible .acc-awm__puce-rond { box-shadow: 0 0 0 4px rgba(255, 152, 0, .35); }
.acc-awm__puce.is-active .acc-awm__puce-rond {
  background: var(--if-c-marron); border-color: var(--if-c-marron); color: var(--if-c-gold); transform: scale(1.1);
  animation: acc-awm-onde 2.4s ease-out infinite;
}
.acc-awm__puce.is-active .acc-awm__puce-icone { animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-awm__puce.is-active .acc-awm__puce-nom { color: var(--if-c-marron); }
.acc-awm__puce.is-faite .acc-awm__puce-rond { background: var(--if-c-gold); border-color: var(--if-c-gold); color: #fff; }
.acc-awm__puce.is-faite .acc-awm__puce-icone { display: none; }
.acc-awm__puce.is-faite .acc-awm__puce-ok { display: inline; animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-awm__puce.is-faite .acc-awm__puce-nom { color: #c26e00; }
@keyframes acc-awm-onde { 0% { box-shadow: 0 0 0 0 rgba(255, 152, 0, .45); } 70% { box-shadow: 0 0 0 12px rgba(255, 152, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 152, 0, 0); } }
@media (max-width: 639px) {
  .acc-awm__puce-rond { width: 36px; height: 36px; font-size: 13px; }
  .acc-awm__rail { top: 16px; }
  .acc-awm__puce-nom { display: none; }
  .acc-awm__puce.is-active .acc-awm__puce-nom { display: block; font-size: 11px; }
}

/* Étapes du formulaire */
.acc-awm__form { position: relative; }
.acc-awm__piege { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.acc-awm__etape { min-width: 0; margin: 0; padding: 0; border: 0; }
.acc-awm__etape[hidden] { display: none; }
.acc-awm__etape-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; width: 100%; margin: 0 0 26px; padding: 0 0 16px; border-bottom: 1px dashed #e8dccf; }
.acc-awm__etape-num {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: #fff3e0; color: #c26e00;
  font-family: var(--if-police-titre, Poppins), sans-serif; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.acc-awm__etape-titre { display: block; margin: 0; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800; font-size: clamp(16px, 1.5vw, 19px); color: #2f2219; }
.acc-awm__etape.is-sortie-avant   { animation: acc-awm-sort-g .26s ease forwards; }
.acc-awm__etape.is-sortie-arriere { animation: acc-awm-sort-d .26s ease forwards; }
.acc-awm__etape.is-entree-avant   { animation: acc-awm-entre-d .5s cubic-bezier(.2, .8, .2, 1) both; }
.acc-awm__etape.is-entree-arriere { animation: acc-awm-entre-g .5s cubic-bezier(.2, .8, .2, 1) both; }
.acc-awm__etape.is-entree-avant .acc-awm__grille > *, .acc-awm__etape.is-entree-arriere .acc-awm__grille > * { animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) both; }
.acc-awm__grille > :nth-child(2) { animation-delay: .06s !important; } .acc-awm__grille > :nth-child(3) { animation-delay: .12s !important; }
.acc-awm__grille > :nth-child(4) { animation-delay: .18s !important; } .acc-awm__grille > :nth-child(5) { animation-delay: .24s !important; }
.acc-awm__grille > :nth-child(n+6) { animation-delay: .3s !important; }
@keyframes acc-awm-sort-g  { to { opacity: 0; transform: translateX(-36px); } }
@keyframes acc-awm-sort-d  { to { opacity: 0; transform: translateX(36px); } }
@keyframes acc-awm-entre-d { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
@keyframes acc-awm-entre-g { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }

/* Champs */
.acc-awm__grille { display: grid; gap: 26px 28px; }
@media (min-width: 640px) { .acc-awm__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.acc-awm__plein { grid-column: 1 / -1; }
.acc-awm__champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.acc-awm__champ label, .acc-awm__label { margin: 0; font-family: var(--if-police-corps, "Open Sans"), sans-serif; font-weight: 700; font-size: 14.5px; line-height: 1.4; color: #3b2a1e; }
.acc-awm__label { display: block; }
.acc-awm__label .acc-awm__quota { margin-left: 6px; vertical-align: 1px; }
.acc-awm__requis { color: #dc2626; }
.acc-awm__facultatif { font-weight: 600; font-size: 12.5px; color: #a39385; }
.acc-awm__aide { margin: -2px 0 2px; font-size: 13px; color: #8a7564; }
.acc-awm__wa { color: #16a34a; }
.acc-awm__champ input:not([type="radio"]):not([type="checkbox"]), .acc-awm__champ textarea {
  width: 100%; padding: 11px 14px; border: 1.5px solid #e4d9ce; border-radius: 6px; background: #fffdf9; outline: none;
  font: 600 15px/1.45 var(--if-police-corps, "Open Sans"), sans-serif; color: #3b2a1e; transition: border-color .2s, box-shadow .25s, background .2s;
}
.acc-awm__champ textarea { resize: vertical; min-height: 96px; line-height: 1.6; }
.acc-awm__champ input::placeholder, .acc-awm__champ textarea::placeholder { color: #b3a598; font-weight: 500; }
.acc-awm__champ input:not([type="radio"]):not([type="checkbox"]):hover, .acc-awm__champ textarea:hover { border-color: #d4c3b2; }
.acc-awm__champ input:not([type="radio"]):not([type="checkbox"]):focus, .acc-awm__champ textarea:focus { border-color: var(--if-c-gold); background: #fff; box-shadow: 0 0 0 4px rgba(255, 152, 0, .16); }
.acc-awm__champ.is-erreur input:not([type="radio"]):not([type="checkbox"]), .acc-awm__champ.is-erreur textarea {
  border-color: #dc2626; background: #fff6f6; box-shadow: 0 0 0 4px rgba(220, 38, 38, .1); animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both;
}
.acc-awm__champ.is-erreur .acc-awm__choix { animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }
.acc-awm__champ.is-erreur .acc-awm__option { border-color: #f5b5b5; }
.acc-awm__sous-champ { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 16px; }
.acc-awm__erreur { margin: 0; color: #dc2626; font-size: 13px; font-weight: 600; animation: if-form-monte .3s ease both; }
.acc-awm__erreur[hidden] { display: none; }
.acc-awm__cnt { margin-left: auto; flex: none; font-family: var(--if-police-titre, Poppins), sans-serif; font-size: 11.5px; font-weight: 700; color: #b3a598; }
.acc-awm__cnt.is-ok { color: #10b981; } .acc-awm__cnt.is-proche { color: #f59e0b; } .acc-awm__cnt.is-max { color: #dc2626; }
.acc-awm__cnt.is-plein { animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }

/* « Secteur d'activité » : modèle du champ de la lightbox « Détails du logo » (.dlg-ligne, .dlg-input, .dlg-select, bouton .dlg-info-btn) */
.acc-awm__champ .dlg-ligne { gap: 14px; }
.acc-awm__champ .dlg-input { min-height: 47px; }
.acc-awm__champ.is-erreur .dlg-input { border-color: #dc2626; background: #fff6f6; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }

/* « Téléphone (WhatsApp) » : modèle du champ « N°Mobile (WhatsApp) » de creer-un-compte.php
   (liste des pays « drapeau Pays (+indicatif) » collée au numéro, aide « 10 chiffres requis… » dessous) */
.acc-awm__tel {
  display: flex; align-items: stretch; min-height: 47px; border: 1.5px solid #e4d9ce; border-radius: 6px; background: #fff; overflow: hidden;
  transition: border-color .2s, box-shadow .25s;
}
.acc-awm__tel:hover { border-color: #d4c3b2; }
.acc-awm__tel:focus-within { border-color: var(--if-c-gold); box-shadow: 0 0 0 4px rgba(255, 152, 0, .16); }
.acc-awm__champ.is-erreur .acc-awm__tel { border-color: #dc2626; background: #fff6f6; box-shadow: 0 0 0 4px rgba(220, 38, 38, .1); animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }
.acc-awm__tel select {
  flex: none; width: 60%; min-width: 0; margin: 0; padding: 0 4px 0 10px;   /* « 🇨🇮 Côte d’Ivoire (+225) » lisible ; le numéro garde la place de ses chiffres */ border: 0; border-right: 1.5px solid #e4d9ce; border-radius: 0; background: #fff;
  font: 500 14.5px var(--if-police-corps, "Open Sans"), sans-serif; color: #222; cursor: pointer; outline: none; text-overflow: ellipsis;
}
.acc-awm__champ .acc-awm__tel input:not([type="radio"]):not([type="checkbox"]) {
  flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none;
}
.acc-awm__tel-aide { flex: 1; min-width: 0; font-size: 12px; color: #9ca3af; transition: color .25s; }
.acc-awm__tel-aide.is-complet { color: #10b981; font-weight: 600; }
.acc-awm__sous-champ .acc-awm__erreur:not([hidden]) + .acc-awm__tel-aide { display: none; }

/* Choix en tuiles : boutons radio (choix unique) et cases à cocher (choix multiple) */
.acc-awm__choix { display: grid; gap: 14px; margin-top: 2px; }
.acc-awm__choix--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* « Nombre de collaborateurs » : tuiles courtes, compactées (sans icône) dès que le groupe est étroit — panneau de droite, téléphone */
.acc-awm__champ[data-awm-champ="collaborateurs"] { container-type: inline-size; }
.acc-awm__choix--4 .acc-awm__option-nom { white-space: nowrap; }
@container (max-width: 820px) {
  .acc-awm__choix--4 .acc-awm__option { padding: 15px 38px 15px 16px; }
  .acc-awm__choix--4 .acc-awm__option-icone { display: none; }
  .acc-awm__choix--4 .acc-awm__option-coche { right: 12px; }
}
@media (min-width: 640px) { .acc-awm__choix--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .acc-awm__choix--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 760px) { .acc-awm__choix--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .acc-awm__choix--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.acc-awm__option {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 40px 13px 13px; border: 1.5px solid #ece2d6; border-radius: 14px; background: #fffdf9;
  cursor: pointer; transition: border-color .25s, background .25s, box-shadow .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .25s;
}
.acc-awm__option input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.acc-awm__option:hover { border-color: #e2c9a6; transform: translateY(-2px); box-shadow: 0 14px 26px -20px rgba(101, 56, 24, .6); }
.acc-awm__option-icone {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px;
  background: #f8f0e6; color: #a07a5a; font-size: 15px; transition: background .3s, color .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
.acc-awm__option:hover .acc-awm__option-icone { transform: rotate(-8deg) scale(1.08); }
.acc-awm__option-texte { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-awm__option-nom { font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 700; font-size: 14px; line-height: 1.35; color: #3b2a1e; }
.acc-awm__option-detail { font-size: 12.5px; line-height: 1.4; color: #8a7564; }
.acc-awm__option-coche {
  position: absolute; top: 50%; right: 12px; margin-top: -11px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #d9c7b3; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 10px;
  transition: background .25s, border-color .25s, color .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.acc-awm__option--case .acc-awm__option-coche { border-radius: 6px; }
.acc-awm__option--detail { align-items: flex-start; }
.acc-awm__option:has(input:checked) { border-color: var(--if-c-gold); background: #fff8ec; box-shadow: 0 0 0 4px rgba(255, 152, 0, .14), 0 16px 30px -22px rgba(255, 152, 0, .9); }
.acc-awm__option:has(input:checked) .acc-awm__option-icone { background: var(--if-c-marron); color: var(--if-c-gold); transform: scale(1.06); }
.acc-awm__option:has(input:checked) .acc-awm__option-coche { background: var(--if-c-gold); border-color: var(--if-c-gold); color: #fff; transform: scale(1.15); }
.acc-awm__option:has(input:checked) .acc-awm__option-coche i { animation: if-info-pastille .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-awm__option:has(input:focus-visible) { outline: 3px solid rgba(255, 152, 0, .5); outline-offset: 2px; }
.acc-awm__option.is-bloque { cursor: not-allowed; background: #faf7f3; }
.acc-awm__option.is-bloque > * { opacity: .42; transition: opacity .25s; }   /* sur les enfants : l'animation d'entrée de la tuile garde son opacité à 1 */
.acc-awm__option.is-bloque:hover { transform: none; box-shadow: none; border-color: #ece2d6; }
.if-formations.is-entree .acc-awm__etape.is-active .acc-awm__option,
.acc-awm__etape.is-entree-avant .acc-awm__option, .acc-awm__etape.is-entree-arriere .acc-awm__option {
  animation: if-form-monte .45s cubic-bezier(.2, .8, .2, 1) calc(.25s + var(--rang, 0) * .05s) both;
}
.if-formations.is-entree .acc-awm__etape.is-active .acc-awm__option { animation-delay: calc(.75s + var(--rang, 0) * .05s); }

/* « Objectifs » : compteur 0 / 3 et champ « Autre » */
.acc-awm__quota {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px; border-radius: 999px; background: #f6efe7; color: #8a7564;
  font-family: var(--if-police-titre, Poppins), sans-serif; font-size: 12px; font-weight: 700; transition: background .25s, color .25s;
}
.acc-awm__quota b { font-weight: 800; }
.acc-awm__quota.is-complet { background: #ecfdf5; color: #047857; }
.acc-awm__quota.is-refus { background: #fdecec; color: #b91c1c; animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }
.acc-awm__autre[hidden] { display: none; }
.acc-awm__autre.is-ouvert { animation: acc-awm-deplie .4s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top; }
@keyframes acc-awm-deplie { from { opacity: 0; transform: translateY(-10px) scaleY(.92); } to { opacity: 1; transform: none; } }

/* Vérification de sécurité */
.acc-awm__captcha {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; align-self: flex-start; padding: 10px 14px; border: 1.5px dashed #e4d9ce; border-radius: 8px; background: #fffaf2;
  font-weight: 700 !important; color: #5b4a3d !important;
}
.acc-awm__captcha i { color: var(--if-c-gold); font-size: 17px; }
.acc-awm__champ .acc-awm__captcha input:not([type="radio"]):not([type="checkbox"]) { width: 90px; text-align: center; padding: 8px 10px; }

/* Messages */
.acc-awm__alerte { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 13px 16px; border-radius: 8px; font-weight: 700; font-size: 14.5px; line-height: 1.45;
  color: #b91c1c; background: #fdecec; border: 1px solid #f5c2c2; }
.acc-awm__alerte[hidden] { display: none; }
.acc-awm__alerte i { margin-top: 2px; }
.acc-awm__alerte.is-visible { animation: if-secoue .5s cubic-bezier(.36, .07, .19, .97) both; }

/* Navigation */
.acc-awm__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 34px; padding-top: 22px; border-top: 1px dashed #e8dccf; }
@media (min-width: 1024px) {
  /* Panneau de droite (hauteur fixe, index.php) : le formulaire part du haut — un contenu centré plus haut que le panneau
     verrait son début (titre, « Revenir aux bannières ») coupé et inaccessible — et la navigation reste collée en bas. */
  .if-accueil-zone.is-rubrique #accApplications.is-ouvert, .if-accueil-zone.is-rubrique #accCompte.is-ouvert, .if-accueil-zone.is-rubrique #accConnexion.is-ouvert, .if-accueil-zone.is-rubrique #accMdp.is-ouvert, .if-accueil-zone.is-rubrique #accDevis.is-ouvert, .if-accueil-zone.is-rubrique #accQrcodes.is-ouvert { justify-content: flex-start; scroll-padding-top: 16px; }
  .acc-awm__nav {
    position: sticky; bottom: 0; z-index: 5; margin: 34px -44px -32px; padding: 12px 44px 14px;
    background: rgba(255, 255, 255, .96); border-top: 1px solid #efe4d8; box-shadow: 0 -16px 24px -20px rgba(101, 56, 24, .45);
  }
  .acc-awm__nav .acc-awm__btn { min-height: 46px; }
}
.acc-awm__nav-info { flex: 1; text-align: center; font-size: 12.5px; color: #a39385; }
.acc-awm__btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 26px;
  border: 0; border-radius: 10px; cursor: pointer; color: #fff; font: 700 15px/1 var(--if-police-titre, Poppins), sans-serif; letter-spacing: .02em;
  transition: background .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, opacity .25s;
}
.acc-awm__btn[hidden] { display: none; }
.acc-awm__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); }
.acc-awm__btn:hover:not(:disabled)::after { animation: acc-ndd-reflet .8s ease; }
.acc-awm__btn--suivant, .acc-awm__btn--envoyer { background: var(--if-c-marron); box-shadow: 0 14px 26px -16px rgba(101, 56, 24, .9); }
.acc-awm__btn--suivant:hover, .acc-awm__btn--envoyer:hover:not(:disabled) { background: var(--if-c-gold); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(255, 152, 0, .9); }
.acc-awm__btn--suivant:hover .fa-arrow-right { animation: acc-sw-fleche .8s ease-in-out infinite; }
.acc-awm__btn--envoyer { padding: 0 30px; text-transform: uppercase; letter-spacing: .06em; }
.acc-awm__btn--envoyer:hover:not(:disabled) .fa-paper-plane { animation: acc-ctc-avion .6s ease; }
.acc-awm__btn--envoyer:disabled { opacity: .85; cursor: progress; }
.acc-awm__btn--retour { background: #9ca3af; }
.acc-awm__btn--retour:hover { background: #6b7280; transform: translateY(-2px); }
.acc-awm__btn--retour:hover .fa-arrow-left { animation: acc-awm-fleche-g .8s ease-in-out infinite; }
@keyframes acc-awm-fleche-g { 50% { transform: translateX(-5px); } }
@media (max-width: 520px) { .acc-awm__nav { flex-direction: column-reverse; align-items: stretch; } .acc-awm__btn { width: 100%; } .acc-awm__nav-info { order: -1; } }

/* Remerciement */
.acc-awm__merci { text-align: center; padding-top: 44px; padding-bottom: 38px; }
.acc-awm__merci-coche { display: block; width: 92px; height: 92px; margin: 0 auto 14px; }
.acc-awm__merci-cercle { fill: #ecfdf5; stroke: #16a34a; stroke-width: 4; stroke-dasharray: 227; stroke-dashoffset: 227; }
.acc-awm__merci-trait { fill: none; stroke: #16a34a; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; }
.acc-awm__merci.is-apparition .acc-awm__merci-cercle { animation: acc-awm-trace .7s cubic-bezier(.65, 0, .35, 1) .15s forwards; }
.acc-awm__merci.is-apparition .acc-awm__merci-trait { animation: acc-awm-trace .45s cubic-bezier(.65, 0, .35, 1) .8s forwards; }
.acc-awm__merci.is-apparition .acc-awm__merci-coche { animation: acc-awm-rebond .5s cubic-bezier(.34, 1.56, .64, 1) 1.2s; }
.acc-awm__merci:not(.is-apparition) .acc-awm__merci-cercle, .acc-awm__merci:not(.is-apparition) .acc-awm__merci-trait { stroke-dashoffset: 0; }
@keyframes acc-awm-trace { to { stroke-dashoffset: 0; } }
@keyframes acc-awm-rebond { 50% { transform: scale(1.12); } }
.acc-awm__merci-titre { margin: 0; font-family: var(--if-police-titre, Poppins), sans-serif; font-weight: 800; font-size: clamp(20px, 2vw, 25px); color: var(--if-c-marron); }
.acc-awm__merci-texte { max-width: 560px; margin: 10px auto 0; color: #5f5650; font-size: 15.5px; line-height: 1.7; }
.acc-awm__merci-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.acc-awm__merci.is-apparition .acc-awm__merci-titre   { animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) .9s both; }
.acc-awm__merci.is-apparition .acc-awm__merci-texte   { animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) 1s both; }
.acc-awm__merci.is-apparition .acc-awm__merci-actions { animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) 1.1s both; }
.acc-awm__eclats { position: absolute; left: 50%; top: 90px; width: 0; height: 0; pointer-events: none; }
.acc-awm__eclats i { position: absolute; width: 9px; height: 9px; border-radius: 2px; opacity: 0; background: var(--if-c-gold); }
.acc-awm__eclats i:nth-child(3n) { background: var(--if-c-marron); border-radius: 50%; }
.acc-awm__eclats i:nth-child(3n+1) { background: #16a34a; }
.acc-awm__merci.is-apparition .acc-awm__eclats i { animation: acc-sw-eclat 1.2s cubic-bezier(.2, .8, .2, 1) 1s both; }
.acc-awm__eclats i:nth-child(1)  { --x: -200px; --y: -40px; } .acc-awm__eclats i:nth-child(2)  { --x: 190px; --y: -60px; }
.acc-awm__eclats i:nth-child(3)  { --x: -120px; --y: -90px; } .acc-awm__eclats i:nth-child(4)  { --x: 130px; --y: -100px; }
.acc-awm__eclats i:nth-child(5)  { --x: -260px; --y: 40px; }  .acc-awm__eclats i:nth-child(6)  { --x: 250px; --y: 30px; }
.acc-awm__eclats i:nth-child(7)  { --x: -60px;  --y: -120px; } .acc-awm__eclats i:nth-child(8)  { --x: 70px;  --y: -130px; }
.acc-awm__eclats i:nth-child(9)  { --x: -170px; --y: 90px; }  .acc-awm__eclats i:nth-child(10) { --x: 180px; --y: 100px; }
.acc-awm__eclats i:nth-child(11) { --x: -230px; --y: -110px; } .acc-awm__eclats i:nth-child(12) { --x: 230px; --y: -120px; }

@media (prefers-reduced-motion: reduce) {
  .acc-awm *, .acc-awm *::before, .acc-awm *::after, .acc-awm__carte { animation: none !important; transition: none !important; }
  .acc-awm__merci-cercle, .acc-awm__merci-trait { stroke-dashoffset: 0 !important; }
}

/* Formulaire « Application Web Métier », étape 6 : badges des hébergements annuels (choix unique) — 04/11/2026 */
.acc-awm__hebs { display: grid; gap: 16px; margin-top: 2px; }
@media (min-width: 640px) { .acc-awm__hebs { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
.acc-awm__heb {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px;
  border: 1.5px solid #ece2d6; border-radius: 16px; cursor: pointer;
  background: linear-gradient(160deg, #fffdf9 0%, #fff7ea 100%);
  box-shadow: 0 14px 30px -26px rgba(101, 56, 24, .7);
  transition: border-color .25s, box-shadow .3s, transform .35s cubic-bezier(.34, 1.56, .64, 1), background .3s;
}
.acc-awm__heb::before {   /* reflet qui balaie le badge */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%); transform: translateX(-120%);
  animation: acc-awm-reflet 5s ease-in-out infinite; animation-delay: calc(1.2s + var(--rang, 0) * .9s);
}
.acc-awm__heb::after {    /* halo or */
  content: ""; position: absolute; right: -50px; top: -50px; width: 140px; height: 140px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 152, 0, .18), transparent 70%); transition: transform .5s;
}
@keyframes acc-awm-reflet { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.acc-awm__heb:hover { border-color: #e2c9a6; transform: translateY(-4px); box-shadow: 0 22px 36px -24px rgba(101, 56, 24, .7); }
.acc-awm__heb:hover::after { transform: scale(1.3); }
.acc-awm__heb input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.acc-awm__heb-cible { position: absolute; inset: 0; z-index: 2; cursor: pointer; }   /* toute la carte sélectionne l'offre */
.acc-awm__heb-ruban {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px;
  background: #fff3e0; color: #c26e00; font: 800 11px var(--if-police-titre, Poppins), sans-serif; letter-spacing: .1em; text-transform: uppercase;
  transition: background .3s, color .3s;
}
.acc-awm__heb-coche {
  position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #d9c7b3; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: 11px;
  transition: background .25s, border-color .25s, color .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.acc-awm__heb-titre { margin: 4px 0 0; padding-right: 30px; font: 800 17px/1.3 var(--if-police-titre, Poppins), sans-serif; color: var(--if-c-marron); }
.acc-awm__heb-desc { flex: 1; color: #5f5650; font-size: 14px; line-height: 1.6; }
.acc-awm__heb-desc p { margin: 0 0 .4em; } .acc-awm__heb-desc p:last-child { margin-bottom: 0; }
.acc-awm__heb-desc ul, .acc-awm__heb-desc ol { margin: 0 0 .4em; padding-left: 1.3em; }
.acc-awm__heb-desc ul { list-style: disc; } .acc-awm__heb-desc ol { list-style: decimal; }
.acc-awm__heb-desc li::marker { color: var(--if-c-gold); }
.acc-awm__heb-desc strong { color: var(--if-c-marron); }
.acc-awm__heb-prix {
  align-self: flex-start; margin: 6px 0 0; padding: 7px 14px; border-radius: 10px; background: var(--if-c-marron); color: #fff;
  font: 600 13px var(--if-police-titre, Poppins), sans-serif; box-shadow: 0 10px 20px -14px rgba(101, 56, 24, .9); transition: background .3s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.acc-awm__heb-prix strong { font-size: 17px; font-weight: 800; color: var(--if-c-gold); }
.acc-awm__heb-prix span { opacity: .8; }
/* Offre choisie */
.acc-awm__heb:has(input:checked) { border-color: var(--if-c-gold); background: linear-gradient(160deg, #fff8ec 0%, #ffefd6 100%);
  box-shadow: 0 0 0 4px rgba(255, 152, 0, .16), 0 22px 36px -24px rgba(255, 152, 0, .9); }
.acc-awm__heb:has(input:checked) .acc-awm__heb-ruban { background: var(--if-c-marron); color: var(--if-c-gold); }
.acc-awm__heb:has(input:checked) .acc-awm__heb-coche { background: var(--if-c-gold); border-color: var(--if-c-gold); color: #fff; transform: scale(1.15); }
.acc-awm__heb:has(input:checked) .acc-awm__heb-coche i { animation: if-info-pastille .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-awm__heb:has(input:checked) .acc-awm__heb-prix { background: var(--if-c-gold); transform: scale(1.04); }
.acc-awm__heb:has(input:checked) .acc-awm__heb-prix strong { color: #fff; }
.acc-awm__heb:has(input:focus-visible) { outline: 3px solid rgba(255, 152, 0, .5); outline-offset: 2px; }
.acc-awm__champ.is-erreur .acc-awm__hebs { animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }
.acc-awm__champ.is-erreur .acc-awm__heb { border-color: #f5b5b5; }
/* Apparition en cascade à l'arrivée sur l'étape */
.acc-awm__etape.is-entree-avant .acc-awm__heb, .acc-awm__etape.is-entree-arriere .acc-awm__heb {
  animation: acc-awm-heb-entree .6s cubic-bezier(.34, 1.56, .64, 1) calc(.2s + var(--rang, 0) * .12s) both;
}
@keyframes acc-awm-heb-entree { from { opacity: 0; transform: translateY(26px) scale(.94) rotate(-1deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .acc-awm__heb, .acc-awm__heb::before, .acc-awm__heb * { animation: none !important; transition: none !important; } }


/* =====================================================================
   RUBRIQUE « CRÉER UN COMPTE » (index.php, #accCompte, creer-un-compte-rubrique.php) — 06/11/2026
   Reprend l'habillage du formulaire « Application Web Métier » (.acc-awm__*) ; ici : cartes Service,
   bandeau d'information, apparition des champs du service choisi, cases à cocher, mot de passe.
   ===================================================================== */
.acc-cpt [hidden] { display: none !important; }
.acc-cpt .acc-awm__carte { padding-top: 32px; }
.acc-cpt__precision { font-weight: 500; color: #8a7564; }
/* Service : 2 badges compacts, même modèle que « Sexe » (.acc-awm__option) */
.acc-cpt__services .acc-awm__option { animation: acc-awm-heb-entree .55s cubic-bezier(.34, 1.56, .64, 1) calc(.3s + var(--rang, 0) * .1s) both; }
.acc-cpt .acc-awm__champ.is-erreur .acc-cpt__services { animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }
/* Bandeau d'information du service choisi */
.acc-cpt__info {
  display: flex; align-items: center; gap: 10px; margin: 20px 0 0; padding: 12px 16px; border-radius: 10px; border: 1px solid #f0dfa0;
  background: #fff8dc; color: var(--if-c-marron); font-weight: 700; font-size: 14px;
}
.acc-cpt__info i { color: var(--if-c-gold); font-size: 16px; }
.acc-cpt__info.is-entree { animation: acc-awm-deplie .45s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top; }
/* Champs du service : apparition en cascade */
.acc-cpt__champs { margin-top: 24px; padding-top: 24px; border-top: 1px dashed #e8dccf; }
.acc-cpt__champs.is-entree .acc-awm__grille > :not([hidden]) { animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) both; }
.acc-cpt__champs.is-entree .acc-awm__grille > :nth-child(2) { animation-delay: .04s; } .acc-cpt__champs.is-entree .acc-awm__grille > :nth-child(3) { animation-delay: .08s; }
.acc-cpt__champs.is-entree .acc-awm__grille > :nth-child(4) { animation-delay: .12s; } .acc-cpt__champs.is-entree .acc-awm__grille > :nth-child(5) { animation-delay: .16s; }
.acc-cpt__champs.is-entree .acc-awm__grille > :nth-child(6) { animation-delay: .2s; }  .acc-cpt__champs.is-entree .acc-awm__grille > :nth-child(7) { animation-delay: .24s; }
.acc-cpt__champs.is-entree .acc-awm__grille > :nth-child(8) { animation-delay: .28s; } .acc-cpt__champs.is-entree .acc-awm__grille > :nth-child(n+9) { animation-delay: .32s; }
.acc-cpt .acc-awm__champ.is-entree { animation: acc-awm-deplie .4s cubic-bezier(.2, .8, .2, 1) both; transform-origin: top; }
.acc-cpt .acc-awm__choix--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Listes Ville / Commune (modèle « Détails du logo ») */
.acc-cpt .dlg-input { min-height: 47px; }
.acc-cpt .dlg-input:disabled { background: #f4efe9; color: #b3a598; cursor: not-allowed; }
.acc-cpt .acc-awm__champ.is-erreur .dlg-input { border-color: #dc2626; background: #fff6f6; box-shadow: 0 0 0 4px rgba(220, 38, 38, .12); animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }
.acc-cpt .acc-awm__champ input:disabled { background: #f4efe9 !important; color: #b3a598; cursor: not-allowed; }
/* Mot de passe + œil */
.acc-cpt__mdp { position: relative; }
.acc-cpt__mdp input { padding-right: 46px !important; }
.acc-cpt__oeil { position: absolute; top: 0; right: 0; height: 100%; width: 44px; border: 0; background: none; color: #a3958a; cursor: pointer; transition: color .2s, transform .25s; }
.acc-cpt__oeil:hover { color: var(--if-c-marron); transform: scale(1.12); }
/* Cases à cocher (CGV / CGF / WhatsApp) */
.acc-cpt__cases { display: flex; flex-direction: column; gap: 12px; }
.acc-cpt__case { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: 14px; line-height: 1.5; color: #5f5650; }
.acc-cpt__case input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.acc-cpt__case-boite {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px;
  border: 2px solid #d9c7b3; background: #fff; color: transparent; font-size: 11px;
  transition: background .2s, border-color .2s, color .2s, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.acc-cpt__case:hover .acc-cpt__case-boite { border-color: var(--if-c-gold); }
.acc-cpt__case input:checked + .acc-cpt__case-boite { background: var(--if-c-marron); border-color: var(--if-c-marron); color: #fff; transform: scale(1.12); }
.acc-cpt__case--wa input:checked + .acc-cpt__case-boite { background: #10b981; border-color: #10b981; }
.acc-cpt__case input:focus-visible + .acc-cpt__case-boite { box-shadow: 0 0 0 4px rgba(255, 152, 0, .3); }
.acc-cpt__case a { color: var(--if-c-marron); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 152, 0, .6); text-underline-offset: 2px; }
.acc-cpt__case a:hover { color: var(--if-c-gold); }
/* Bouton « Créer mon compte » : même bouton que creer-un-compte.php (sous le formulaire, à gauche, casse normale) */
.acc-cpt__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; }
.acc-cpt__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--if-c-marron); color: #fff; font: 700 13.5px/1.4 var(--if-police-titre, Poppins), sans-serif; text-transform: none; letter-spacing: normal;
  transition: background-color .15s, opacity .15s;
}
.acc-cpt__btn:hover:not(:disabled) { background: var(--if-c-gold); }
.acc-cpt__btn:disabled { opacity: .4; cursor: not-allowed; }
.acc-cpt__btn:focus-visible { outline: 3px solid rgba(255, 152, 0, .5); outline-offset: 2px; }
.acc-cpt__maj { color: #dc2626; font-weight: 600; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .acc-cpt *, .acc-cpt *::before { animation: none !important; transition: none !important; } }

/* =====================================================================
   RUBRIQUE « CONNEXION » (index.php, #accConnexion, connexion-rubrique.php) — 06/11/2026
   Carte étroite et centrée : cadenas animé (halo qui respire, s'entrouvre à la saisie, tremble en cas d'échec,
   devient une coche verte au succès), champs avec pictogramme, apparition en cascade, trait de progression
   pendant les 4 s qui précèdent la redirection.
   ===================================================================== */
.acc-cnx { max-width: 540px; }
.acc-cnx [hidden] { display: none !important; }
.acc-cnx__tete { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; }
.acc-cnx__icone {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--if-c-marron); color: var(--if-c-gold); font-size: 22px; box-shadow: 0 14px 26px -14px rgba(101, 56, 24, .9);
  transition: background .35s, color .35s, box-shadow .35s;
}
.acc-cnx__icone::after {   /* halo qui respire */
  content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid rgba(255, 152, 0, .45);
  animation: acc-cnx-halo 2.6s ease-in-out infinite;
}
.acc-cnx__icone i { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); transform-origin: 70% 80%; }
.acc-cnx__carte:focus-within .acc-cnx__icone i { transform: rotate(-14deg) translateY(-1px); }   /* le cadenas s'entrouvre */
.acc-cnx__accroche { margin: 0; font: 800 clamp(18px, 1.6vw, 21px)/1.25 var(--if-police-titre, Poppins), sans-serif; color: #2f2219; }
.acc-cnx__sous { margin: 4px 0 0; font-size: 14px; color: #8a7564; }
.acc-cnx__carte.is-refus .acc-cnx__icone { background: #fdecec; color: #dc2626; animation: if-secoue .5s cubic-bezier(.36, .07, .19, .97) both; }
.acc-cnx__carte.is-refus .acc-cnx__icone::after { border-color: rgba(220, 38, 38, .35); }
.acc-cnx__carte.is-succes .acc-cnx__icone { background: #059669; color: #fff; box-shadow: 0 0 0 6px rgba(5, 150, 105, .15); }
.acc-cnx__carte.is-succes .acc-cnx__icone::after { border-color: rgba(5, 150, 105, .45); }
.acc-cnx__carte.is-succes .acc-cnx__icone i { transform: none; animation: if-info-pastille .55s cubic-bezier(.34, 1.56, .64, 1) both; }

.acc-cnx__form { display: flex; flex-direction: column; gap: 20px; }
.acc-cnx__saisie { position: relative; }
.acc-cnx__picto { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #c2ab94; font-size: 15px; pointer-events: none; transition: color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.acc-cnx .acc-cnx__saisie input { padding-left: 44px !important; }
.acc-cnx .acc-cnx__saisie input[type="password"], .acc-cnx #cnx_password { padding-right: 48px !important; }
.acc-cnx__saisie:focus-within .acc-cnx__picto { color: var(--if-c-gold); transform: translateY(-50%) scale(1.12); }
.acc-cnx .acc-awm__champ.is-erreur .acc-cnx__picto { color: #dc2626; }
.acc-cnx .acc-awm__champ.is-erreur input { animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }
.acc-cnx__oeil { position: absolute; top: 0; right: 0; height: 100%; width: 46px; border: 0; background: none; color: #a3958a; cursor: pointer; transition: color .2s, transform .25s; }
.acc-cnx__oeil:hover { color: var(--if-c-marron); transform: scale(1.12); }

/* Bouton : celui de connexion.php (marron, pleine largeur, casse normale), reflet au survol */
.acc-cnx__btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 4px;
  padding: 12px 24px; border: 0; border-radius: 8px; cursor: pointer; background: var(--if-c-marron); color: #fff;
  font: 600 15px/1.4 var(--if-police-titre, Poppins), sans-serif; text-transform: none; letter-spacing: normal;
  box-shadow: 0 14px 26px -18px rgba(101, 56, 24, .9); transition: background-color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, opacity .2s;
}
.acc-cnx__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); }
.acc-cnx__btn:hover:not(:disabled) { background: var(--if-c-gold); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(255, 152, 0, .9); }
.acc-cnx__btn:hover:not(:disabled)::after { animation: acc-ndd-reflet .8s ease; }
.acc-cnx__btn:hover:not(:disabled) .fa-sign-in-alt { animation: acc-sw-fleche .8s ease-in-out infinite; }
.acc-cnx__btn:disabled { opacity: .6; cursor: not-allowed; }
.acc-cnx__btn.is-succes, .acc-cnx__btn.is-succes:disabled { background: #059669; opacity: 1; cursor: default; }
.acc-cnx__btn.is-succes i { animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-cnx__btn:focus-visible { outline: 3px solid rgba(255, 152, 0, .5); outline-offset: 2px; }
.acc-cnx__oubli { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: -6px; font: 700 13.5px/1.4 var(--if-police-titre, Poppins), sans-serif; color: var(--if-c-marron); text-decoration: none; transition: color .2s; }
.acc-cnx__oubli i { font-size: 12px; color: var(--if-c-gold); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.acc-cnx__oubli:hover { color: var(--if-c-gold); }
.acc-cnx__oubli:hover i { transform: rotate(-25deg); }

/* Messages */
.acc-cnx__avis { display: flex; gap: 10px; margin: 0 0 18px; padding: 13px 16px; border-radius: 8px; border: 1px solid #fcd9a6; background: #fff8eb; color: #92400e; font-weight: 700; font-size: 14px; line-height: 1.45; }
.acc-cnx__avis i { margin-top: 3px; }
.acc-cnx__apprenant { border-width: 2px; }
.acc-cnx__apprenant > i { font-size: 20px; margin-top: 1px; }
.acc-cnx__apprenant p { margin: 0; font-weight: 600; }
.acc-cnx__apprenant .acc-cnx__apprenant-titre { margin-bottom: 4px; font-weight: 800; font-size: 15px; }
.acc-cnx__apprenant strong, .acc-cnx__apprenant a { font-weight: 800; color: #991b1b; text-decoration: underline; text-decoration-color: #fca5a5; }
.acc-cnx__succes {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 13px 16px 15px; border-radius: 8px;
  border: 1px solid #a7f3d0; background: #ecfdf5; color: #047857; font-weight: 700; font-size: 14.5px; animation: if-form-monte .45s cubic-bezier(.2, .8, .2, 1) both;
}
.acc-cnx__succes::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #10b981; transform-origin: left; animation: acc-cnx-progression 4s linear both; }

/* Apparition en cascade à l'ouverture de la rubrique */
.if-formations.is-entree .acc-cnx__tete { animation: if-form-monte .6s cubic-bezier(.2, .8, .2, 1) .55s both; }
.if-formations.is-entree .acc-cnx__form > * { animation: if-form-monte .55s cubic-bezier(.2, .8, .2, 1) both; }
.if-formations.is-entree .acc-cnx__form > :nth-child(1) { animation-delay: .7s; }
.if-formations.is-entree .acc-cnx__form > :nth-child(2) { animation-delay: .8s; }
.if-formations.is-entree .acc-cnx__form > :nth-child(3) { animation-delay: .9s; }
.if-formations.is-entree .acc-cnx__form > :nth-child(4) { animation-delay: 1s; }

@keyframes acc-cnx-halo { 0%, 100% { opacity: .2; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes acc-cnx-progression { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .acc-cnx *, .acc-cnx *::before, .acc-cnx *::after { animation: none !important; transition: none !important; } }
/* Rubrique Connexion : message « lien de réinitialisation envoyé » (10 s, trait de progression assorti, puis fondu) */
.acc-cnx__lien { align-items: flex-start; line-height: 1.5; }
.acc-cnx__lien > i { margin-top: 3px; }
.acc-cnx__lien::after { animation-duration: 10s; }
.acc-cnx__lien.is-sortie { animation: acc-cnx-fondu .45s ease forwards; }
@keyframes acc-cnx-fondu { to { opacity: 0; transform: translateY(-8px); } }
/* Rubrique Connexion : carte « Réinitialisation du mot de passe » (lien reçu par e-mail, ?reset=ok|expire|invalide) */
.acc-cnx__reset { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.acc-cnx__reset-sur { margin: 0; font: 700 12px/1 var(--if-police-titre, Poppins), sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #a3876c; }
.acc-cnx__reset-icone {
  display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; font-size: 28px;
  animation: if-info-pastille .6s cubic-bezier(.34, 1.56, .64, 1) .45s both;
}
.acc-cnx__reset--ok .acc-cnx__reset-icone { background: #ecfdf5; color: #059669; border: 1px solid #a7f3d0; box-shadow: 0 0 0 8px rgba(5, 150, 105, .08); }
.acc-cnx__reset--erreur .acc-cnx__reset-icone { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; box-shadow: 0 0 0 8px rgba(220, 38, 38, .07); }
.acc-cnx__reset-titre { width: 100%; margin: 0; padding: 13px 16px; border-radius: 8px; font: 700 15px/1.4 var(--if-police-corps, "Open Sans"), sans-serif; animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) .6s both; }
.acc-cnx__reset--ok .acc-cnx__reset-titre { border: 1px solid #a7f3d0; background: #ecfdf5; color: #047857; }
.acc-cnx__reset--erreur .acc-cnx__reset-titre { border: 1px solid #fecaca; background: #fef2f2; color: #b91c1c; }
.acc-cnx__reset-texte { margin: 0; font-size: 14.5px; line-height: 1.6; color: #5b4a3d; animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) .7s both; }
.acc-cnx__reset-btn { width: auto; text-decoration: none; animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) .8s both; }
.acc-cnx__reset.is-sortie { animation: acc-sw-sortie .3s ease forwards; }

/* =====================================================================
   RUBRIQUE « DEVIS » (index.php, #accDevis, devis-rubrique.php) — 07/11/2026
   Carte du formulaire : médaillon « devis » qui flotte, champs 2 par ligne en cascade, éditeur du message
   (habillage de la rubrique Contacts), bouton « Envoyer » avec avion qui décolle, succès visible 4 s.
   ===================================================================== */
.acc-dvs { max-width: 880px; }
.acc-dvs [hidden] { display: none !important; }
.acc-dvs__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.acc-dvs__tete { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.acc-dvs__icone {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px;
  background: var(--if-c-marron); color: var(--if-c-gold); font-size: 17px; box-shadow: 0 14px 26px -14px rgba(101, 56, 24, .9);
  animation: acc-dvs-flotte 3.2s ease-in-out infinite;
}
.acc-dvs__icone::after { content: ""; position: absolute; inset: -5px; border-radius: 15px; border: 2px solid rgba(255, 152, 0, .4); animation: acc-cnx-halo 2.6s ease-in-out infinite; }
.acc-dvs__accroche { margin: 0; font: 800 clamp(18px, 1.6vw, 21px)/1.25 var(--if-police-titre, Poppins), sans-serif; color: #2f2219; }
.acc-dvs__sous { margin: 4px 0 0; font-size: 14px; color: #8a7564; }
.acc-dvs__grille { row-gap: 18px; }
.acc-dvs .acc-awm__plein > .acc-awm__champ { height: 100%; }
.acc-dvs__succes {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 13px 16px; border-radius: 8px; border: 1px solid #a7f3d0; background: #ecfdf5;
  color: #047857; font-weight: 700; font-size: 14.5px; line-height: 1.5;
}
.acc-dvs__succes > i { margin-top: 3px; }
.acc-dvs__succes.is-visible { animation: if-form-monte .45s cubic-bezier(.2, .8, .2, 1) both; }
.acc-dvs__succes.is-visible > i { animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
.acc-dvs__succes.is-sortie { animation: acc-cnx-fondu .45s ease forwards; }
.acc-dvs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 26px; }
.acc-dvs__requis-info { font-size: 12.5px; color: #a39385; }
.acc-dvs__btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 30px;
  border: 0; border-radius: 8px; cursor: pointer; background: var(--if-c-marron); color: #fff; font: 700 15px/1.4 var(--if-police-titre, Poppins), sans-serif;
  box-shadow: 0 14px 26px -18px rgba(101, 56, 24, .9); transition: background-color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, opacity .2s;
}
.acc-dvs__btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); }
.acc-dvs__btn:hover:not(:disabled) { background: var(--if-c-gold); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(255, 152, 0, .9); }
.acc-dvs__btn:hover:not(:disabled)::after { animation: acc-ndd-reflet .8s ease; }
.acc-dvs__btn:hover:not(:disabled) .fa-paper-plane { animation: acc-ctc-avion .6s ease; }
.acc-dvs__btn:disabled { opacity: .6; cursor: progress; }
.acc-dvs__btn.is-envoye .fa-paper-plane { animation: acc-ctc-avion .6s ease; }
.acc-dvs__btn:focus-visible { outline: 3px solid rgba(255, 152, 0, .5); outline-offset: 2px; }
@media (max-width: 520px) { .acc-dvs__btn { width: 100%; } .acc-dvs__actions { flex-direction: column-reverse; align-items: stretch; text-align: center; } }

/* Apparition en cascade à l'ouverture de la rubrique */
.if-formations.is-entree .acc-dvs__tete { animation: if-form-monte .6s cubic-bezier(.2, .8, .2, 1) .55s both; }
.if-formations.is-entree .acc-dvs__grille > * { animation: if-form-monte .55s cubic-bezier(.2, .8, .2, 1) both; }
.if-formations.is-entree .acc-dvs__grille > :nth-child(1) { animation-delay: .65s; } .if-formations.is-entree .acc-dvs__grille > :nth-child(2) { animation-delay: .72s; }
.if-formations.is-entree .acc-dvs__grille > :nth-child(3) { animation-delay: .79s; } .if-formations.is-entree .acc-dvs__grille > :nth-child(4) { animation-delay: .86s; }
.if-formations.is-entree .acc-dvs__grille > :nth-child(5) { animation-delay: .93s; } .if-formations.is-entree .acc-dvs__grille > :nth-child(6) { animation-delay: 1s; }
.if-formations.is-entree .acc-dvs__actions { animation: if-form-monte .55s cubic-bezier(.2, .8, .2, 1) 1.08s both; }
@keyframes acc-dvs-flotte { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .acc-dvs *, .acc-dvs *::before, .acc-dvs *::after { animation: none !important; transition: none !important; } }

/* =====================================================================
   RUBRIQUE QR CODE : PRÉSENTATION PAR ÉTAPES (index.php, #accQrcodes, qrcode-rubrique.php) — 08/11/2026
   1 Présentation (texte | image) → 2 Titre + préambule + Importance 1 → 3 Importance 2 → 4 Importance 3 → 5 Offres.
   Repères cliquables, glissement selon le sens, cartes « Importance » numérotées, boutons Précédent / Suivant.
   ===================================================================== */
.acc-qrd { width: 100%; max-width: 1080px; margin: 0 auto; }
.acc-qrd [hidden] { display: none !important; }
.acc-qrd__reperes { display: flex; justify-content: center; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.acc-qrd__repere { display: block; width: 34px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #eadfd3; cursor: pointer; overflow: hidden; transition: background-color .3s, width .35s cubic-bezier(.2, .8, .2, 1); }
.acc-qrd__repere span { display: block; width: 100%; height: 100%; background: var(--if-c-gold); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.acc-qrd__repere.is-vu { background: #f3c98b; }
.acc-qrd__repere.is-actif { width: 54px; }
.acc-qrd__repere.is-actif span { transform: scaleX(1); }
.acc-qrd__repere:hover { background: #f3c98b; }
.acc-qrd__repere:focus-visible { outline: 3px solid rgba(255, 152, 0, .45); outline-offset: 3px; }

.acc-qrd__etape { padding: 28px 30px 24px; border: 1px solid #efe5da; border-radius: 18px; background: #fff; box-shadow: 0 24px 50px -36px rgba(101, 56, 24, .55); }
.acc-qrd__etape--offres { padding: 22px 0 0; border: 0; background: none; box-shadow: none; }
.acc-qrd__etape.is-depuis-droite { animation: acc-qrd-droite .55s cubic-bezier(.2, .8, .2, 1) both; }
.acc-qrd__etape.is-depuis-gauche { animation: acc-qrd-gauche .55s cubic-bezier(.2, .8, .2, 1) both; }
.acc-qrd__titre { margin: 0 0 18px; font: 800 clamp(19px, 1.9vw, 25px)/1.25 var(--if-police-titre, Poppins), sans-serif; color: #2f2219; }
.acc-qrd__titre::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 10px; border-radius: 4px; background: var(--if-c-gold); transform-origin: left; animation: acc-qrd-trait .6s cubic-bezier(.2, .8, .2, 1) .25s both; }
.acc-qrd__rappel { margin: 0 0 14px; font: 700 12px/1.3 var(--if-police-titre, Poppins), sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #a3876c; }
.acc-qrd__html { font-size: 15.5px; line-height: 1.7; color: #4b3b2f; text-align: justify; }
.acc-qrd__html p { margin: 0 0 .7em; }
.acc-qrd__html p:last-child { margin-bottom: 0; }
.acc-qrd__html ul, .acc-qrd__html ol { margin: .3em 0 .7em; padding-left: 1.3em; }
.acc-qrd__html ul { list-style: disc; } .acc-qrd__html ol { list-style: decimal; }
.acc-qrd__html strong { color: #2f2219; }

.acc-qrd__pres { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 28px; align-items: center; }
.acc-qrd__image { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 720 / 675; box-shadow: 0 26px 50px -30px rgba(101, 56, 24, .7); }
.acc-qrd__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2, .8, .2, 1); }
.acc-qrd__image:hover img { transform: scale(1.04); }
.acc-qrd__image::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); pointer-events: none; }
.acc-qrd__etape.is-active .acc-qrd__image { animation: acc-qrd-image .7s cubic-bezier(.2, .8, .2, 1) .15s both; }
.acc-qrd__etape.is-active .acc-qrd__texte { animation: acc-qrd-monte .6s cubic-bezier(.2, .8, .2, 1) .1s both; }

.acc-qrd__preambule { margin-bottom: 18px; padding: 14px 18px; border-left: 4px solid var(--if-c-gold); border-radius: 0 12px 12px 0; background: #fff8ec; font-weight: 600; }
.acc-qrd__importance { position: relative; display: flex; gap: 18px; align-items: flex-start; padding: 22px 22px 22px 20px; border: 1px solid #f1e3d2; border-radius: 16px; background: linear-gradient(135deg, #fffdf9, #fff6ea); }
.acc-qrd__etape.is-active .acc-qrd__importance { animation: acc-qrd-monte .6s cubic-bezier(.2, .8, .2, 1) .12s both; }
.acc-qrd__numero {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px;
  background: var(--if-c-marron); color: var(--if-c-gold); font: 800 22px/1 var(--if-police-titre, Poppins), sans-serif; box-shadow: 0 14px 24px -14px rgba(101, 56, 24, .9);
}
.acc-qrd__etape.is-active .acc-qrd__numero { animation: if-info-pastille .6s cubic-bezier(.34, 1.56, .64, 1) .3s both; }
.acc-qrd__importance .acc-qrd__html { flex: 1; min-width: 0; padding-top: 4px; }

.acc-qrd__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.acc-qrd__nav--haut { margin: 0 0 14px; justify-content: flex-start; }
.acc-qrd__btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 11px 26px; border-radius: 8px; cursor: pointer;
  font: 700 14.5px/1.3 var(--if-police-titre, Poppins), sans-serif; transition: background-color .2s, color .2s, border-color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.acc-qrd__btn--suiv { border: 0; background: var(--if-c-marron); color: #fff; box-shadow: 0 14px 26px -18px rgba(101, 56, 24, .9); }
.acc-qrd__btn--suiv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%); }
.acc-qrd__btn--suiv:hover { background: var(--if-c-gold); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(255, 152, 0, .9); }
.acc-qrd__btn--suiv:hover::after { animation: acc-ndd-reflet .8s ease; }
.acc-qrd__btn--suiv:hover i { animation: acc-sw-fleche .8s ease-in-out infinite; }
.acc-qrd__btn--prec { border: 1.5px solid #e2d4c6; background: #fff; color: var(--if-c-marron); }
.acc-qrd__btn--prec:hover { border-color: var(--if-c-gold); color: var(--if-c-gold); transform: translateY(-2px); }
.acc-qrd__btn--prec:hover i { transform: translateX(-3px); }
.acc-qrd__btn i { transition: transform .25s; }
.acc-qrd__btn:focus-visible { outline: 3px solid rgba(255, 152, 0, .5); outline-offset: 2px; }

@media (max-width: 860px) {
  .acc-qrd__pres { grid-template-columns: 1fr; }
  .acc-qrd__image { max-width: 460px; justify-self: center; width: 100%; }
}
@media (max-width: 520px) {
  .acc-qrd__etape { padding: 20px 16px 18px; }
  .acc-qrd__importance { flex-direction: column; gap: 12px; padding: 18px 16px; }
  .acc-qrd__btn { padding: 10px 18px; }
}
@keyframes acc-qrd-droite { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes acc-qrd-gauche { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
@keyframes acc-qrd-monte { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes acc-qrd-image { from { opacity: 0; transform: scale(.94) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
@keyframes acc-qrd-trait { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .acc-qrd *, .acc-qrd *::before, .acc-qrd *::after { animation: none !important; transition: none !important; } }

/* ── 08/11/2026 : rubrique QR Code — titres à la taille de « Votre Projet d'Application Web Métier » (.acc-awm__titre),
      image réduite à la hauteur du paragraphe de gauche ── */
.acc-qrd__titre { font: 800 clamp(17px, 1.7vw, 21px)/1.3 var(--if-police-titre, Poppins), sans-serif; color: var(--if-c-marron); margin-bottom: 16px; }
.acc-qrd__titre::after { width: 48px; height: 3px; margin-top: 8px; }
.acc-qrd__pres { grid-template-columns: minmax(0, 1fr) minmax(200px, .55fr); gap: 24px; align-items: stretch; }
.acc-qrd__image { aspect-ratio: auto; min-height: 170px; height: 100%; }
.acc-qrd__image img { position: absolute; inset: 0; }
@media (max-width: 860px) { .acc-qrd__pres { grid-template-columns: 1fr; } .acc-qrd__image { aspect-ratio: 720 / 675; height: auto; max-width: 380px; } }

/* ── 08/11/2026 : tous les boutons « Précédent » des rubriques de l'accueil (Site Web dynamique, Application Web Métier,
      QR Code dynamique) : fond blanc, bordure et texte or ; au survol fond or, texte blanc ── */
.acc-sw__btn.acc-sw__btn--retour, .acc-awm__btn.acc-awm__btn--retour, .acc-qrd__btn.acc-qrd__btn--prec {
  background: #fff; color: var(--if-c-gold); border: 2px solid var(--if-c-gold); box-shadow: none;
}
.acc-sw__btn.acc-sw__btn--retour:hover, .acc-awm__btn.acc-awm__btn--retour:hover, .acc-qrd__btn.acc-qrd__btn--prec:hover {
  background: var(--if-c-gold); color: #fff; border-color: var(--if-c-gold); transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(255, 152, 0, .9);
}
.acc-sw__btn.acc-sw__btn--retour:hover i, .acc-awm__btn.acc-awm__btn--retour:hover i, .acc-qrd__btn.acc-qrd__btn--prec:hover i { animation: acc-awm-fleche-g .8s ease-in-out infinite; }

/* =====================================================================
   RUBRIQUE QR CODE : OFFRES PACK STARTER / PACK BUSINESS (étape 5, qrcode-rubrique.php) — 08/11/2026
   Cartes comparatives (ruban « Le plus populaire »), « Valider » / « Annuler » sous chaque offre, « Ajouter au panier ».
   ===================================================================== */
.acc-qrd__etape--offres.a-offres > .text-center.py-10 { display: none; }   /* « Aucune offre… » du catalogue masqué : les packs sont affichés */
.acc-qro { margin-bottom: 26px; }
.acc-qro__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.acc-qro__carte {
  position: relative; display: flex; flex-direction: column; padding: 30px 26px 22px; border: 1.5px solid #efe5da; border-radius: 20px; background: #fff;
  box-shadow: 0 24px 50px -38px rgba(101, 56, 24, .6); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow .35s, border-color .35s, opacity .35s, filter .35s;
}
.acc-qrd__etape.is-active .acc-qro__carte { animation: acc-qrd-monte .6s cubic-bezier(.2, .8, .2, 1) calc(.1s + var(--rang, 0) * .12s) both; }
.acc-qro__carte:hover { transform: translateY(-4px); box-shadow: 0 30px 56px -34px rgba(101, 56, 24, .65); }
.acc-qro__carte.is-populaire { border-color: var(--if-c-gold); background: linear-gradient(180deg, #fff7e9 0, #fff 170px); box-shadow: 0 0 0 3px rgba(255, 152, 0, .14), 0 28px 54px -34px rgba(255, 152, 0, .8); }
/* Offre mise en avant (arrivée depuis « Découvrir le Pack Business », mes-qrcodes.php — 12/11/2026) : halo doré + battement cadencé */
.acc-qrd__etape.is-active .acc-qro__carte.is-mise-en-avant { animation: acc-qrd-monte .6s cubic-bezier(.2, .8, .2, 1) both, acc-qro-cadence 1.8s ease-in-out .7s infinite; z-index: 2; }
.acc-qro__carte.is-mise-en-avant { border-color: var(--if-c-gold); background: linear-gradient(180deg, #fff1d6 0, #fff 190px); }
@keyframes acc-qro-cadence {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 0 0 3px rgba(255, 152, 0, .2), 0 0 24px 0 rgba(255, 170, 40, .25), 0 28px 54px -34px rgba(255, 152, 0, .8); }
  50%      { transform: translateY(-8px) scale(1.015); box-shadow: 0 0 0 7px rgba(255, 152, 0, .32), 0 0 46px 8px rgba(255, 170, 40, .45), 0 40px 70px -30px rgba(255, 152, 0, .95); }
}
@media (prefers-reduced-motion: reduce) {
  .acc-qrd__etape.is-active .acc-qro__carte.is-mise-en-avant { animation: none; box-shadow: 0 0 0 5px rgba(255, 152, 0, .35); }
}
.acc-qro__carte.is-validee { border-color: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, .16), 0 28px 54px -34px rgba(5, 150, 105, .7); transform: translateY(-4px); }
.acc-qro__carte.is-ecartee { opacity: .55; filter: grayscale(.5); }
.acc-qro__carte.is-ecartee:hover { transform: none; }
.acc-qro__ruban {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 7px; padding: 6px 16px; border-radius: 999px;
  background: var(--if-c-gold); color: #2f2219; font: 800 12.5px/1 var(--if-police-titre, Poppins), sans-serif; white-space: nowrap; box-shadow: 0 10px 20px -10px rgba(255, 152, 0, .9);
}
.acc-qro__ruban i { animation: acc-qro-etoile 2.4s ease-in-out infinite; }
.acc-qro__icone { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; background: #f5efe8; color: #a3876c; font-size: 20px; transition: background-color .3s, color .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.acc-qro__carte.is-populaire .acc-qro__icone { background: var(--if-c-marron); color: var(--if-c-gold); }
.acc-qro__carte:hover .acc-qro__icone { transform: rotate(-8deg) scale(1.06); }
.acc-qro__nom { margin: 14px 0 4px; font: 800 clamp(17px, 1.6vw, 20px)/1.25 var(--if-police-titre, Poppins), sans-serif; color: #2f2219; }
.acc-qro__prix { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px dashed #eadfd3; color: #8a7564; font-size: 14px; }
.acc-qro__prix strong { font: 800 clamp(22px, 2.2vw, 28px)/1.1 var(--if-police-titre, Poppins), sans-serif; color: var(--if-c-marron); }
.acc-qro__carte.is-populaire .acc-qro__prix strong { color: #c26e00; }
.acc-qro__liste { flex: 1; display: flex; flex-direction: column; gap: 11px; margin: 0 0 20px; padding: 0; list-style: none; }
.acc-qro__liste li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: #4b3b2f; }
.acc-qro__liste li > i { flex: none; margin-top: 3px; color: var(--if-c-gold); }
.acc-qro__cle { display: block; font: 700 11.5px/1.3 var(--if-police-titre, Poppins), sans-serif; letter-spacing: .03em; text-transform: uppercase; color: #a3876c; margin-bottom: 1px; }
.acc-qro__actions { display: flex; gap: 10px; }
.acc-qro__valider, .acc-qro__annuler {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border-radius: 8px; cursor: pointer;
  font: 700 14px/1.3 var(--if-police-titre, Poppins), sans-serif; transition: background-color .2s, color .2s, border-color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, opacity .2s;
}
.acc-qro__valider { flex: 1; border: 0; background: var(--if-c-marron); color: #fff; box-shadow: 0 14px 26px -18px rgba(101, 56, 24, .9); }
.acc-qro__valider:hover:not(:disabled) { background: var(--if-c-gold); transform: translateY(-2px); }
.acc-qro__valider:disabled { cursor: not-allowed; background: #c9beb3; box-shadow: none; }
.acc-qro__valider.is-validee, .acc-qro__valider.is-validee:disabled { background: #059669; cursor: default; }
.acc-qro__valider.is-validee i { animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-qro__annuler { background: #fff; color: var(--if-c-gold); border: 2px solid var(--if-c-gold); animation: acc-qrd-droite .35s cubic-bezier(.2, .8, .2, 1) both; }
.acc-qro__annuler:hover { background: var(--if-c-gold); color: #fff; transform: translateY(-2px); }
.acc-qro__annuler:hover i { transform: rotate(-200deg); }
.acc-qro__annuler i { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.acc-qro__valider:focus-visible, .acc-qro__annuler:focus-visible { outline: 3px solid rgba(255, 152, 0, .5); outline-offset: 2px; }
.acc-qro__panier { display: flex; justify-content: center; margin-top: 22px; }
.acc-qro__panier .acc-ndd__panier { min-width: 240px; }
@media (max-width: 760px) { .acc-qro__grille { grid-template-columns: 1fr; gap: 28px; } .acc-qro__panier .acc-ndd__panier { width: 100%; } }
@keyframes acc-qro-etoile { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(72deg) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .acc-qro *, .acc-qro *::before, .acc-qro *::after { animation: none !important; transition: none !important; } }

/* 08/11/2026 : offres QR Code — montants un peu plus petits ; message de succès à droite du bouton, sur la même ligne */
.acc-qro__prix strong { font-size: clamp(18px, 1.7vw, 22px); }
.acc-qro__panier { flex-wrap: wrap; align-items: center; gap: 14px; }
.acc-qro__succes { margin-top: 0; }

/* =====================================================================
   RUBRIQUE QR CODE : CGV (qrcode-rubrique.php) — 08/11/2026
   Bouton « Valider les CGV … » à gauche d'« Ajouter au panier » ; lightbox « CGV QR Code Dynamique » (un article par page).
   ===================================================================== */
.acc-qro__cgv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 22px; border-radius: 10px; cursor: pointer;
  background: #fff; color: var(--if-c-marron); border: 2px solid var(--if-c-gold); font: 700 15px/1.3 var(--if-police-titre, Poppins), sans-serif;
  animation: acc-qrd-gauche .4s cubic-bezier(.2, .8, .2, 1) both; transition: background-color .2s, color .2s, border-color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.acc-qro__cgv-btn i { color: var(--if-c-gold); transition: color .2s, transform .3s; }
.acc-qro__cgv-btn:hover { background: var(--if-c-gold); color: #fff; transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(255, 152, 0, .9); }
.acc-qro__cgv-btn:hover i { color: #fff; transform: rotate(-8deg) scale(1.1); }
.acc-qro__cgv-btn:not(.is-validees) i { animation: acc-cgv-pulse 1.8s ease-in-out infinite; }
.acc-qro__cgv-btn.is-validees { border-color: #059669; color: #047857; background: #ecfdf5; }
.acc-qro__cgv-btn.is-validees i { color: #059669; }
.acc-qro__cgv-btn.is-validees, .acc-qro__cgv-btn.is-validees:hover { background: #ecfdf5; color: #047857; transform: none; box-shadow: none; cursor: default; pointer-events: none; }   /* CGV validées : simple état, non cliquable */
.acc-qro__cgv-btn.is-validees:hover i { color: #059669; transform: none; }
.acc-qro__cgv-btn:focus-visible { outline: 3px solid rgba(255, 152, 0, .5); outline-offset: 2px; }
.acc-qro__cgv-btn[hidden] { display: none; }

.acc-cgv { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 20px; }
.acc-cgv[hidden] { display: none; }
html.acc-cgv-ouverte { overflow: hidden; }
.acc-cgv__fond { position: absolute; inset: 0; background: rgba(32, 20, 12, .32); opacity: 0; transition: opacity .25s; }   /* sans flou : l’arrière-plan reste lisible */
.acc-cgv__boite {
  position: relative; display: flex; flex-direction: column; width: min(760px, 100%); max-height: min(86vh, 760px); border-radius: 18px; background: #fff; overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(32, 20, 12, .6); opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .28s, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.acc-cgv.is-ouvert .acc-cgv__fond { opacity: 1; }
.acc-cgv.is-ouvert .acc-cgv__boite { opacity: 1; transform: none; }
.acc-cgv.is-ferme .acc-cgv__fond { opacity: 0; }
.acc-cgv.is-ferme .acc-cgv__boite { opacity: 0; transform: translateY(12px) scale(.98); }
.acc-cgv__tete { display: flex; align-items: center; gap: 14px; padding: 20px 22px 14px; }
.acc-cgv__icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--if-c-marron); color: var(--if-c-gold); font-size: 18px; }
.acc-cgv__tete-texte { flex: 1; min-width: 0; }
.acc-cgv__titre { margin: 0; font: 800 clamp(17px, 1.7vw, 21px)/1.3 var(--if-police-titre, Poppins), sans-serif; color: var(--if-c-marron); }
.acc-cgv__compteur { margin: 2px 0 0; font: 700 12px/1.3 var(--if-police-titre, Poppins), sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #a3876c; }
.acc-cgv__fermer { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f5efe8; color: var(--if-c-marron); cursor: pointer; font-size: 17px; transition: background-color .2s, color .2s, transform .3s; }
.acc-cgv__fermer:hover { background: var(--if-c-gold); color: #fff; transform: rotate(90deg); }
.acc-cgv__barre { height: 4px; margin: 0 22px; border-radius: 4px; background: #f1e6d9; overflow: hidden; }
.acc-cgv__barre span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--if-c-gold); transition: width .45s cubic-bezier(.2, .8, .2, 1); }
.acc-cgv__corps { flex: 1; min-height: 160px; overflow-y: auto; padding: 22px 26px; overscroll-behavior: contain; }
.acc-cgv__article.is-droite { animation: acc-qrd-droite .45s cubic-bezier(.2, .8, .2, 1) both; }
.acc-cgv__article.is-gauche { animation: acc-qrd-gauche .45s cubic-bezier(.2, .8, .2, 1) both; }
.acc-cgv__art { margin: 0 0 12px; font: 800 16.5px/1.35 var(--if-police-titre, Poppins), sans-serif; color: #2f2219; }
.acc-cgv__art::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 8px; border-radius: 3px; background: var(--if-c-gold); }
.acc-cgv__detail { font-size: 15px; }
.acc-cgv__succes { position: relative; overflow: hidden; margin-top: 18px; padding: 12px 16px 14px; }
.acc-cgv__succes:not(.hidden) { animation: acc-ndd-msg .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-cgv__succes:not(.hidden) > i { display: inline-block; animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
.acc-cgv__succes::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #059669; transform-origin: left; transform: scaleX(0); }
.acc-cgv__succes:not(.hidden)::after { animation: if-alerte-progression 4s linear forwards; }   /* trait qui défile pendant les 4 s */
.acc-cgv .acc-qrd__btn.acc-cgv__valider.is-succes, .acc-cgv .acc-qrd__btn.acc-cgv__valider.is-succes:disabled { background: #059669; color: #fff; opacity: 1; filter: none; cursor: default; }
.acc-cgv__valider.is-succes i { animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-cgv__pied { display: flex; justify-content: space-between; gap: 12px; padding: 14px 22px 20px; border-top: 1px solid #f1e6d9; background: #fffdfa; }
.acc-cgv__pied .acc-qrd__btn--suiv { margin-left: auto; }
.acc-cgv__pied .acc-qrd__btn[hidden] { display: none; }
.acc-cgv__valider { background: #059669; }
.acc-cgv__valider:hover { background: #047857; box-shadow: 0 16px 28px -14px rgba(5, 150, 105, .9); }
.acc-cgv__pied .acc-qrd__btn:disabled { opacity: .6; cursor: default; transform: none; }
@media (max-width: 520px) { .acc-cgv { padding: 10px; } .acc-cgv__corps { padding: 18px; } .acc-cgv__pied { padding: 12px 14px 16px; } }
@keyframes acc-cgv-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@media (prefers-reduced-motion: reduce) { .acc-cgv *, .acc-qro__cgv-btn, .acc-qro__cgv-btn i { animation: none !important; transition: none !important; } }

/* =====================================================================
   RUBRIQUE « MATÉRIELS & CONSOMMABLES » (index.php, #accMateriels) — 08/11/2026 : contenu « Bientôt disponible »
   ===================================================================== */
.acc-mat { max-width: 560px; margin: 10px auto 0; padding: 34px 28px 30px; text-align: center; background: #fff; border: 1px solid #f1e6d9; border-radius: 18px;
  box-shadow: 0 18px 40px -28px rgba(101, 56, 24, .45); animation: acc-ndd-msg .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.acc-mat__icone { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 16px; background: var(--if-c-marron); color: var(--if-c-gold); font-size: 26px;
  animation: if-info-pastille .6s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
.acc-mat__titre { margin: 16px 0 6px; font: 800 clamp(18px, 1.8vw, 22px)/1.3 var(--if-police-titre, Poppins), sans-serif; color: var(--if-c-marron); }
.acc-mat__texte { margin: 0 0 20px; color: #6a6560; font-size: 14.5px; line-height: 1.6; }
.acc-mat__btn:hover { background: color-mix(in srgb, var(--if-c-marron) 85%, #000); }

/* =====================================================================
   PORTFOLIO SITES WEB (site-web-rubrique.php) — 08/11/2026 :
   bouton « Voir Portfolio … » (à droite de « Configurer mon site Web ») et lightbox « Portfolio Sites Web dynamiques »
   ouverte en effet « waouh » (rebond + rotation 3D, liens en cascade), voile sans flou.
   ===================================================================== */
.acc-sw__actions--centre { flex-wrap: wrap; }
.acc-pfw__ouvrir { background: #fff; color: var(--if-c-marron); box-shadow: inset 0 0 0 2px var(--if-c-gold); }
.acc-pfw__ouvrir:hover { background: var(--if-c-gold); color: #fff; transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(255, 152, 0, .9); }
.acc-pfw__ouvrir i { color: var(--if-c-gold); transition: color .2s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.acc-pfw__ouvrir:hover i { color: #fff; transform: rotate(-12deg) scale(1.15); }

.acc-pfw { position: fixed; inset: 0; z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 20px; perspective: 1200px; }
.acc-pfw[hidden] { display: none; }
html.acc-pfw-ouverte { overflow: hidden; }
.acc-pfw__fond { position: absolute; inset: 0; background: rgba(32, 20, 12, .32); opacity: 0; transition: opacity .25s; }   /* sans flou */
.acc-pfw.is-ouvert .acc-pfw__fond { opacity: 1; }
.acc-pfw.is-ferme .acc-pfw__fond { opacity: 0; }
.acc-pfw__boite { position: relative; display: flex; flex-direction: column; width: min(680px, 100%); max-height: min(86vh, 760px); border-radius: 20px; background: #fff; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(32, 20, 12, .65); opacity: 0; transform-origin: 50% 40%; }
.acc-pfw.is-ouvert .acc-pfw__boite { animation: acc-pfw-waouh .7s cubic-bezier(.2, 1.3, .35, 1) both; }
.acc-pfw.is-ferme .acc-pfw__boite { opacity: 0; transform: scale(.94) translateY(10px); transition: opacity .25s, transform .28s; }
@keyframes acc-pfw-waouh {
  0%   { opacity: 0; transform: rotateX(28deg) rotateZ(-4deg) scale(.6) translateY(40px); }
  55%  { opacity: 1; transform: rotateX(-6deg) rotateZ(1deg) scale(1.04) translateY(-6px); }
  80%  { transform: rotateX(2deg) scale(.99); }
  100% { opacity: 1; transform: none; }
}
.acc-pfw__boite::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .75) 48%, transparent 66%); transform: translateX(-120%); }
.acc-pfw.is-ouvert .acc-pfw__boite::before { animation: acc-pfw-reflet 1.1s ease .35s both; }
@keyframes acc-pfw-reflet { to { transform: translateX(120%); } }
.acc-pfw__tete { display: flex; align-items: center; gap: 14px; padding: 20px 22px 14px; }
.acc-pfw__icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px; background: var(--if-c-marron); color: var(--if-c-gold); font-size: 19px; }
.acc-pfw.is-ouvert .acc-pfw__icone { animation: if-info-pastille .6s cubic-bezier(.34, 1.56, .64, 1) .25s both; }
.acc-pfw__tete-texte { flex: 1; min-width: 0; }
.acc-pfw__titre { margin: 0; font: 800 clamp(17px, 1.7vw, 21px)/1.3 var(--if-police-titre, Poppins), sans-serif; color: var(--if-c-marron); }
.acc-pfw__sous { margin: 2px 0 0; font: 700 12px/1.3 var(--if-police-titre, Poppins), sans-serif; letter-spacing: .06em; text-transform: uppercase; color: #a3876c; }
.acc-pfw__fermer { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f5efe8; color: var(--if-c-marron); cursor: pointer; font-size: 17px; transition: background-color .2s, color .2s, transform .3s; }
.acc-pfw__fermer:hover { background: var(--if-c-gold); color: #fff; transform: rotate(90deg); }
.acc-pfw__barre { display: block; height: 4px; margin: 0 22px; border-radius: 4px; background: var(--if-c-gold); transform-origin: left; transform: scaleX(0); }
.acc-pfw.is-ouvert .acc-pfw__barre { animation: acc-pfw-barre .7s cubic-bezier(.2, .8, .2, 1) .3s both; }
@keyframes acc-pfw-barre { to { transform: scaleX(1); } }
.acc-pfw__liste { list-style: none; margin: 0; padding: 18px 22px 22px; overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 10px; }
.acc-pfw__item { opacity: 0; }
.acc-pfw.is-ouvert .acc-pfw__item { animation: acc-pfw-item .5s cubic-bezier(.2, 1.2, .35, 1) both; animation-delay: calc(.35s + var(--i, 0) * .07s); }
@keyframes acc-pfw-item { from { opacity: 0; transform: translateX(-26px) scale(.97); } to { opacity: 1; transform: none; } }
.acc-pfw__lien { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid #f1e6d9; border-radius: 14px; background: #fffdfb; color: inherit; text-decoration: none; overflow: hidden;
  transition: border-color .25s, background-color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
.acc-pfw__lien::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--if-c-gold); transform: scaleY(0); transition: transform .3s; }
.acc-pfw__lien:hover, .acc-pfw__lien:focus-visible { border-color: rgba(255, 152, 0, .55); background: #fff; transform: translateX(6px); box-shadow: 0 14px 28px -20px rgba(101, 56, 24, .55); outline: none; }
.acc-pfw__lien:hover::before, .acc-pfw__lien:focus-visible::before { transform: scaleY(1); }
.acc-pfw__num { flex: none; width: 26px; font: 800 13px/1 var(--if-police-titre, Poppins), sans-serif; color: #d2bfa9; transition: color .25s; }
.acc-pfw__globe { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: #fff4e3; color: var(--if-c-gold); font-size: 17px; transition: background-color .25s, color .25s, transform .5s; }
.acc-pfw__lien:hover .acc-pfw__num { color: var(--if-c-gold); }
.acc-pfw__lien:hover .acc-pfw__globe { background: var(--if-c-marron); color: var(--if-c-gold); transform: rotate(360deg); }
.acc-pfw__infos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.acc-pfw__nom { font: 700 15px/1.35 var(--if-police-titre, Poppins), sans-serif; color: var(--if-c-marron); overflow-wrap: anywhere; }
.acc-pfw__url { font-size: 13px; color: #8b7a6a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-pfw__fleche { flex: none; color: #c9b6a3; font-size: 14px; transition: color .25s, transform .3s; }
.acc-pfw__lien:hover .acc-pfw__fleche { color: var(--if-c-gold); transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) { .acc-pfw.is-ouvert .acc-pfw__boite, .acc-pfw.is-ouvert .acc-pfw__item { animation-duration: .01s; animation-delay: 0s; } }

/* Portfolio : pagination (5 sites par page) — 09/11/2026 */
.acc-pfw__item[hidden] { display: none; }
.acc-pfw__item.is-entree { animation: acc-pfw-item .45s cubic-bezier(.2, 1.2, .35, 1) both !important; animation-delay: calc(var(--i, 0) * .06s) !important; }
.acc-pfw__pages { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; padding: 0 22px 20px; }
.acc-pfw__page { min-width: 38px; height: 38px; padding: 0 10px; border: 1.5px solid #f1e6d9; border-radius: 999px; background: #fff; color: var(--if-c-marron); cursor: pointer;
  font: 700 13.5px/1 var(--if-police-titre, Poppins), sans-serif; transition: color .2s, background-color .25s, border-color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
.acc-pfw__page:hover:not(:disabled):not(.is-active) { border-color: var(--if-c-gold); color: var(--if-c-gold); transform: translateY(-3px); }
.acc-pfw__page.is-active { border-color: var(--if-c-marron); background: var(--if-c-marron); color: #fff; transform: scale(1.1); box-shadow: 0 8px 18px -8px rgba(101, 56, 24, .8); }
.acc-pfw__page:disabled { opacity: .35; cursor: default; }
.acc-pfw__page--fleche { font-size: 12px; }

/* =====================================================================
   BADGES « RUBRIQUE SPÉCIALE » — rubrique « Faire des impressions numériques » (index.php) — 09/11/2026
   Goodies, Marketing, Signalétique : à l'extrême gauche, sur la ligne du champ de recherche.
   ===================================================================== */
.if-recherche-zone--badges { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.if-recherche-zone--badges > .if-recherche { flex: 1 1 300px; }
.if-recherche-zone--badges > [id$="AucunResultat"] { flex: 1 1 100%; }
.if-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-right: auto; }
.if-badge { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 13px; border: 1.5px solid #f1e6d9; border-radius: 999px; background: #fff;
  color: var(--if-c-marron); cursor: pointer; font: 700 13.5px/1 var(--if-police-titre, Poppins), sans-serif; white-space: nowrap; overflow: hidden;
  box-shadow: 0 6px 16px -12px rgba(101, 56, 24, .5);
  transition: color .25s, background-color .25s, border-color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
  animation: if-badge-entree .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--i, 0) * .08s); }
@keyframes if-badge-entree { from { opacity: 0; transform: translateY(10px) scale(.9); } to { opacity: 1; transform: none; } }
.if-badge i { color: var(--if-c-gold); font-size: 14px; transition: color .25s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.if-badge__nb { min-width: 22px; height: 22px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #fff4e3; color: #b26a00;
  font: 700 11.5px/1 var(--if-police-titre, Poppins), sans-serif; font-style: normal; transition: background-color .25s, color .25s; }
.if-badge:hover { border-color: var(--if-c-gold); transform: translateY(-3px); box-shadow: 0 12px 22px -14px rgba(255, 152, 0, .9); }
.if-badge:hover i { transform: rotate(-12deg) scale(1.18); }
.if-badge:focus-visible { outline: 3px solid rgba(255, 152, 0, .55); outline-offset: 2px; }
.if-badge.is-actif { border-color: var(--if-c-marron); background: var(--if-c-marron); color: #fff; box-shadow: 0 12px 24px -12px rgba(101, 56, 24, .85); }
.if-badge.is-actif i { color: var(--if-c-gold); }
.if-badge.is-actif .if-badge__nb { background: var(--if-c-gold); color: #fff; }
.if-badge.is-clic { animation: if-badge-clic .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes if-badge-clic { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: none; } }
.if-badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%); pointer-events: none; }
.if-badge.is-clic::after { animation: acc-pfw-reflet .7s ease both; }
@media (max-width: 640px) { .if-badges { width: 100%; } }

/* « Détails du logo » validé : figé, sans hover vert, non cliquable (09/11/2026) */
.dlg-btn-details.is-valide:disabled, .dlg-btn-details.is-valide:disabled:hover { color: #047857; border-color: #10b981; background: #ecfdf5; opacity: 1; cursor: default; transform: none; box-shadow: none; pointer-events: none; }

/* =====================================================================
   « DÉFINIR LES DIMENSIONS DU PRODUIT SIGNALÉTIQUE » (index.php, #sgnModal) — 09/11/2026
   Reprend la lightbox .dlg (effet d'ouverture sans flou) ; champs sur une même ligne.
   ===================================================================== */
.sgn__boite { max-width: 980px; }
.sgn__form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sgn__form.sgn__form--bache { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sgn__form > .sgn-apercu, .sgn__form > .dlg-message { grid-column: 1 / -1; }
.sgn__form > .dlg-valider { grid-column: 1 / -1; justify-self: end; }
@media (max-width: 760px) { .sgn__form, .sgn__form.sgn__form--bache { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .sgn__form, .sgn__form.sgn__form--bache { grid-template-columns: minmax(0, 1fr); } }
.sgn-saisie { position: relative; }
.sgn-saisie > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: #c9b6a3; font-size: 13px; pointer-events: none; transition: color .25s, transform .3s; }
.sgn-saisie:focus-within > i { color: var(--if-c-gold); transform: translateY(-50%) scale(1.15); }
.sgn-saisie > .dlg-input { padding-left: 36px; }
.sgn-surface { background: #fff4e3 !important; border-color: #f5d7a6 !important; color: var(--if-c-marron) !important; font-weight: 800 !important; cursor: default; }
.sgn-saisie--surface > i { color: var(--if-c-gold); }
.sgn-surface.is-maj { animation: sgn-maj .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes sgn-maj { 0% { transform: scale(.96); box-shadow: 0 0 0 0 rgba(255, 152, 0, .5); } 60% { transform: scale(1.03); box-shadow: 0 0 0 7px rgba(255, 152, 0, 0); } 100% { transform: none; } }
.sgn-apercu { margin: 0; padding: 10px 14px; border-radius: 10px; background: #fffaf2; border: 1px dashed #f1d3a3; color: #7a5a3c; font-size: 14px; animation: dlg-deplie .4s cubic-bezier(.2, .8, .2, 1) both; }
.sgn-apercu i { color: var(--if-c-gold); margin-right: 4px; }
.sgn-apercu strong { color: var(--if-c-marron); }
.sgn-prix { display: inline-block; animation: sgn-maj .55s cubic-bezier(.34, 1.56, .64, 1); }
.sgn-prix__mention { font-size: .55em; font-weight: 600; color: #8a7a6c; white-space: nowrap; }
/* « Définir dimensions … » validé : figé, sans hover vert, non cliquable (comme « Détails du logo ✓ ») */
#modalSgnBtn.is-valide:disabled, #modalSgnBtn.is-valide:disabled:hover { color: #047857; border-color: #10b981; background: #ecfdf5; opacity: 1; cursor: default; transform: none; box-shadow: none; pointer-events: none; }
#modalSgnBtn:disabled:not(.is-valide) { opacity: .6; cursor: default; pointer-events: none; }

/* Corbeille « annuler les dimensions » (entre « Dimensions ✓ » et « Ajouter au panier ») + confirmation Non / Oui — 09/11/2026 */
.sgn-annuler { flex: none; width: 52px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fecaca; border-radius: 8px; background: #fff;
  color: #dc2626; font-size: 18px; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
.sgn-annuler[hidden] { display: none; }
.sgn-annuler:hover, .sgn-annuler:focus-visible { background: #991b1b; border-color: #991b1b; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(153, 27, 27, .8); outline: none; }
.sgn-annuler:hover i { animation: sgn-corbeille .5s ease; }
.sgn-annuler:active { transform: scale(.92); }
.sgn-annuler.is-entree { animation: sgn-corbeille-entree .45s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes sgn-corbeille { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 50% { transform: rotate(12deg); } 75% { transform: rotate(-6deg); } }
@keyframes sgn-corbeille-entree { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
#modalSgnBtn.is-reinit { animation: sgn-maj .55s cubic-bezier(.34, 1.56, .64, 1); }
.sgn-confirm { position: fixed; inset: 0; z-index: 20050; display: grid; place-items: center; padding: 16px; }
.sgn-confirm__fond { position: absolute; inset: 0; background: rgba(34, 22, 12, .32); opacity: 0; transition: opacity .25s; }   /* sans flou */
.sgn-confirm__boite { position: relative; width: min(420px, 100%); padding: 26px 26px 22px; border-radius: 18px; background: #fff; text-align: center;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(18px) scale(.92); transition: opacity .25s, transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.sgn-confirm.is-open .sgn-confirm__fond { opacity: 1; }
.sgn-confirm.is-open .sgn-confirm__boite { opacity: 1; transform: none; }
.sgn-confirm.is-closing .sgn-confirm__boite { opacity: 0; transform: scale(.95); }
.sgn-confirm__icone { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: #fef2f2; color: #dc2626; font-size: 22px; }
.sgn-confirm__icone::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(220, 38, 38, .35); animation: sgn-anneau 1.4s ease-out infinite; }
.sgn-confirm.is-open .sgn-confirm__icone i { animation: sgn-corbeille .6s ease .25s; }
@keyframes sgn-anneau { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.sgn-confirm__texte { margin: 14px 0 4px; font: 700 16px/1.4 var(--if-police-titre, Poppins), sans-serif; color: #2b211a; }
.sgn-confirm__qui { margin: 0 0 4px; font-size: 13.5px; color: #8a7a6c; }
.sgn-confirm__boutons { display: flex; justify-content: center; gap: 12px; margin-top: 16px; }
.sgn-confirm__non, .sgn-confirm__oui { min-width: 110px; height: 42px; border-radius: 999px; border: 0; cursor: pointer; font: 700 14px/1 var(--if-police-titre, Poppins), sans-serif;
  transition: background-color .2s, color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s; }
.sgn-confirm__non { background: #f3eee9; color: var(--if-c-marron); }
.sgn-confirm__non:hover, .sgn-confirm__non:focus-visible { background: #e9dfd5; transform: translateY(-2px); outline: none; }
.sgn-confirm__oui { background: #dc2626; color: #fff; }
.sgn-confirm__oui:hover, .sgn-confirm__oui:focus-visible { background: #991b1b; transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(153, 27, 27, .8); outline: none; }
#modalDetailsLogoBtn.is-reinit { animation: sgn-maj .55s cubic-bezier(.34, 1.56, .64, 1); }

/* =====================================================================
   ENCART « CLIENTS ÉTRANGERS NON FRANCOPHONES » (index.php, sur le carrousel de bannières) — 09/11/2026
   clients-etrangers-encart.php : carte en verre clair à droite du carrousel (réductible en pastille).
   ===================================================================== */
.cet-encart { position: absolute; z-index: 25; top: 22px; right: 86px; bottom: 56px; width: min(440px, calc(100% - 120px)); display: flex; flex-direction: column;
  border-radius: 20px; background: rgba(255, 255, 255, .96); box-shadow: 0 30px 70px -28px rgba(20, 10, 4, .75), 0 0 0 1px rgba(255, 255, 255, .6) inset; overflow: hidden;
  animation: cet-entree .7s cubic-bezier(.2, 1.2, .35, 1) .35s both; transform-origin: 100% 0; }
.cet-encart::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--if-c-gold), #ffcf7a, var(--if-c-gold)); background-size: 200% 100%; animation: cet-reflet 4s linear infinite; z-index: 2; }
@keyframes cet-entree { from { opacity: 0; transform: translateX(30px) scale(.94) rotate(1.5deg); } to { opacity: 1; transform: none; } }
@keyframes cet-reflet { to { background-position: -200% 0; } }
.cet-encart.is-reduit { display: none; }
.cet-encart.is-entree { animation: cet-entree .55s cubic-bezier(.2, 1.2, .35, 1) both; }
.cet-encart__defil { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 20px; scrollbar-width: thin; scrollbar-color: #e8d6c2 transparent; }
.cet-reduire { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f5efe8; color: var(--if-c-marron); cursor: pointer; transition: background-color .2s, color .2s, transform .3s; }
.cet-reduire:hover, .cet-reduire:focus-visible { background: var(--if-c-gold); color: #fff; transform: rotate(90deg); outline: none; }
.cet-tete { display: flex; align-items: center; gap: 12px; padding-right: 36px; }
.cet-tete__icone { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--if-c-marron); color: var(--if-c-gold); font-size: 18px; animation: cet-globe 6s linear infinite; }
@keyframes cet-globe { 0%, 80%, 100% { transform: none; } 88% { transform: rotate(-12deg) scale(1.08); } 94% { transform: rotate(8deg); } }
.cet-tete__titre { margin: 0; font: 800 17px/1.25 var(--if-police-titre, Poppins), sans-serif; color: var(--if-c-marron); }
.cet-message { margin: 14px 0 16px; padding: 12px 14px; border-left: 4px solid var(--if-c-gold); border-radius: 0 12px 12px 0; background: #fff8ec; color: #3b2a1e; font-size: 14px; line-height: 1.6; }
.cet-message > :first-child { margin-top: 0; } .cet-message > :last-child { margin-bottom: 0; }
.cet-message p { margin: 0 0 .5em; }
.cet-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.cet-plein { grid-column: 1 / -1; }
.cet-champ { min-width: 0; }
.cet-champ label { display: block; margin-bottom: 5px; font: 700 12.5px/1.3 var(--if-police-titre, Poppins), sans-serif; color: #2b211a; }
.cet-requis { color: #dc2626; }
.cet-wa { color: #25d366; }
.cet-champ input, .cet-tel select { width: 100%; height: 42px; padding: 0 12px; border: 1.5px solid #eadfd3; border-radius: 10px; background: #fffdfb; color: #2b211a; font-size: 14px;
  transition: border-color .2s, box-shadow .2s, background-color .2s; }
.cet-champ input:focus, .cet-tel select:focus { outline: none; border-color: var(--if-c-gold); background: #fff; box-shadow: 0 0 0 4px rgba(255, 152, 0, .15); }
.cet-tel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border: 1.5px solid #eadfd3; border-radius: 10px; overflow: hidden; background: #fffdfb; transition: border-color .2s, box-shadow .2s; }
.cet-tel:focus-within { border-color: var(--if-c-gold); box-shadow: 0 0 0 4px rgba(255, 152, 0, .15); }
.cet-tel select, .cet-tel input { border: 0; border-radius: 0; box-shadow: none !important; background: transparent; }
.cet-tel select { border-right: 1.5px solid #eadfd3; cursor: pointer; }
.cet-sous { display: flex; justify-content: space-between; gap: 8px; min-height: 20px; margin-top: 3px; }
.cet-erreur { margin: 0; color: #dc2626; font-size: 12px; font-weight: 600; animation: dlg-deplie .3s ease both; }
.cet-cnt { margin-left: auto; font: 700 11px/1.6 var(--if-police-titre, Poppins), sans-serif; color: #b5a593; white-space: nowrap; transition: color .2s; }
.cet-cnt.is-ok { color: #16a34a; } .cet-cnt.is-proche { color: #d97706; } .cet-cnt.is-max { color: #dc2626; }
.cet-tel-aide { font-size: 11.5px; color: #9a8b7c; } .cet-tel-aide.is-complet { color: #16a34a; font-weight: 600; }
.cet-champ.is-erreur input, .cet-champ.is-erreur .cet-tel, .cet-champ.is-erreur .tox-tinymce { border-color: #ef4444 !important; background: #fef2f2; }
.cet-champ.is-erreur { animation: if-secoue .4s ease; }
.cet-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cet-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.cet-info { font-size: 12px; color: #9a8b7c; }
.cet-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 24px; border: 0; border-radius: 10px; background: var(--if-c-marron); color: #fff; cursor: pointer;
  font: 700 14.5px/1 var(--if-police-titre, Poppins), sans-serif; box-shadow: 0 12px 24px -14px rgba(101, 56, 24, .9); transition: background-color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.cet-btn:hover:not(:disabled), .cet-btn:focus-visible { background: var(--if-c-gold); transform: translateY(-2px); outline: none; }
.cet-btn:hover:not(:disabled) i { animation: cet-envol .6s ease; }
@keyframes cet-envol { 40% { transform: translate(5px, -5px) rotate(-10deg); } 100% { transform: none; } }
.cet-btn:disabled { opacity: .7; cursor: default; }
.cet-btn.is-envoye { animation: sgn-maj .55s cubic-bezier(.34, 1.56, .64, 1); }
.cet-alerte, .cet-succes { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 12px; padding: 11px 14px; border-radius: 12px; font-size: 13.5px; font-weight: 600; line-height: 1.5; }
.cet-alerte { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; }
.cet-succes { background: #ecfdf5; border: 1px solid #a7f3d0; color: #047857; }
.cet-alerte i, .cet-succes i { margin-top: 2px; }
.cet-alerte.is-visible, .cet-succes.is-visible { animation: cet-msg .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.cet-succes.is-visible i { animation: if-info-pastille .6s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
.cet-succes.is-sortie { animation: cet-msg-sortie .45s ease forwards; }
@keyframes cet-msg { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cet-msg-sortie { to { opacity: 0; transform: translateY(-8px); } }
.cet-pastille { position: absolute; z-index: 25; top: 22px; right: 86px; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px 0 8px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .95); color: var(--if-c-marron); cursor: pointer; font: 700 13.5px/1 var(--if-police-titre, Poppins), sans-serif;
  box-shadow: 0 16px 34px -16px rgba(20, 10, 4, .8); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), background-color .2s; }
.cet-pastille[hidden] { display: none; }
.cet-pastille i { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--if-c-marron); color: var(--if-c-gold); font-size: 15px; }
.cet-pastille::after { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid rgba(255, 152, 0, .55); animation: sgn-anneau 1.8s ease-out infinite; pointer-events: none; }
.cet-pastille:hover, .cet-pastille:focus-visible { transform: translateY(-2px) scale(1.03); background: #fff; outline: none; }
.cet-pastille.is-entree { animation: if-badge-entree .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@media (max-width: 767px) {
  .cet-encart { top: 12px; right: 12px; left: 12px; bottom: 60px; width: auto; }
  .cet-pastille { top: 12px; right: 12px; }
  .cet-pastille span { display: none; } .cet-pastille { padding: 0 7px; }
  .cet-grille { grid-template-columns: minmax(0, 1fr); }
}
.cet-alerte[hidden], .cet-succes[hidden], .cet-erreur[hidden] { display: none; }
.cet-champ textarea { width: 100%; }

/* Encart clients étrangers : message de succès animé comme ceux des rubriques (rebond, coche, trait de 4 s) — 10/11/2026 */
.cet-succes { position: relative; overflow: hidden; padding-bottom: 14px; }
.cet-succes.is-visible { animation: acc-ndd-msg .5s cubic-bezier(.34, 1.56, .64, 1) both; box-shadow: 0 12px 26px -18px rgba(5, 150, 105, .8); }
.cet-succes.is-visible > i { display: inline-block; animation: if-info-pastille .6s cubic-bezier(.34, 1.56, .64, 1) .12s both; }
.cet-succes::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #059669; transform-origin: left; transform: scaleX(0); }
.cet-succes.is-visible::after { animation: if-alerte-progression 4s linear forwards; }
.cet-succes.is-sortie { animation: cet-msg-sortie .45s ease forwards; }

/* Stock disponible — rubrique « Matériels & accessoires » (carte + lightbox « Détails Produit ») — 10/11/2026 */
.mat-stock { font-weight: 500; font-size: 14px; white-space: nowrap; }
.mat-stock--ok { color: #16a34a; }
.mat-stock--faible { color: #ea580c; }
.mat-stock--epuise { color: #dc2626; }
.mat-stock--modal { margin: -10px 0 12px; font-size: 14.5px; animation: dlg-deplie .4s ease both; }
.mat-stock--modal[hidden] { display: none; }

/* =====================================================================
   COMPTE CLIENT (body.if-compte : mon-tdb, mes-informations, mes-commandes, mes-formations) — 10/11/2026
   Même habillage animé que les rubriques de index.php, appliqué au balisage Tailwind existant :
   champs de recherche (convertis en label.if-recherche par ifourmi-anim.js, section 3 bis), champs de formulaire
   (modèle .acc-awm__champ), boutons (reflet + soulèvement), tableaux (lignes en cascade, survol, ligne ajoutée
   surlignée, ligne supprimée qui glisse), pagination ronde (modèle Portfolio), messages de succès (trait de 4 s,
   coche qui pivote, fondu de sortie), alerte de confirmation (.sgn-confirm, section 6 de ifourmi-anim.js).
   ===================================================================== */
/* --- Champs de recherche : à droite, 470 px au repos, 580 px pendant la saisie --- */
.if-compte .if-recherche-admin { margin-left: auto; }
.if-compte .if-recherche input { height: 2.75rem; }

/* --- Libellés --- */
.if-compte .pm-section label.block.font-poppins { font-family: var(--if-police-corps, "Open Sans"), sans-serif; font-weight: 700; font-size: 13.5px; color: #3b2a1e; }

/* --- Champs de formulaire (les champs « intérieurs » des blocs composés ont border-0 et ne sont pas visés) --- */
.if-compte .pm-section :is(input, select, textarea).border:not(.border-0):not([type="checkbox"]):not([type="radio"]),
.if-compte #cc_mobile_wrap, .if-compte #pcp_produits_box {
  border: 1.5px solid #e4d9ce; border-radius: 6px; background-color: #fffdf9;
  font-family: var(--if-police-corps, "Open Sans"), sans-serif; font-weight: 600; color: #3b2a1e;
  transition: border-color .2s, box-shadow .25s, background-color .2s;
}
.if-compte .pm-section :is(input, select).border:not(.border-0):not([type="checkbox"]):not([type="radio"]),
.if-compte #cc_mobile_wrap { min-height: 47px; }
.if-compte .pm-section :is(input, textarea).border:not(.border-0)::placeholder, .if-compte .pm-section input.border-0::placeholder { color: #b3a598; font-weight: 500; }
.if-compte .pm-section :is(input, select, textarea).border:not(.border-0):not(:disabled):not([readonly]):hover,
.if-compte #cc_mobile_wrap:hover { border-color: #d4c3b2; }
.if-compte .pm-section :is(input, select, textarea).border:not(.border-0):not([readonly]):focus,
.if-compte #cc_mobile_wrap:focus-within, .if-compte #pcp_produits_box:focus-within {
  outline: none; border-color: var(--if-c-gold); background-color: #fff; box-shadow: 0 0 0 4px rgba(255, 152, 0, .16);
}
.if-compte #cc_mobile_wrap select, .if-compte #cc_mobile_wrap input { background: transparent; font-weight: 600; color: #3b2a1e; }
.if-compte #cc_mobile_wrap select { border-right-color: #e4d9ce; }
/* Lecture seule / désactivé */
.if-compte .pm-section :is(input, select, textarea).border:not(.border-0):is(:disabled, [readonly]):not([style*="background"]) { background-color: #f4efe9; color: #9a8b7e; cursor: not-allowed; }
.if-compte .pm-section input[readonly][style*="background"] { cursor: default; }
/* Champ en erreur (pmSetErr) : rouge + secousse */
.if-compte .pm-section .border-red-500, .if-compte .pm-section .border-red-400 {
  border-color: #dc2626 !important; background-color: #fff6f6 !important; box-shadow: 0 0 0 4px rgba(220, 38, 38, .1) !important;
  animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both;
}
/* Flèche des listes : pivote à l'ouverture */
.if-compte .relative:focus-within > .cc-select-arrow { transform: translateY(-50%) rotate(180deg); color: var(--if-c-gold); }

/* --- Apparition des champs en cascade (à l'ouverture d'une section, au chargement de « Mes informations ») --- */
.if-compte .pm-section .grid > * { animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) both; }
.if-compte .pm-section .grid > :nth-child(2) { animation-delay: .05s; } .if-compte .pm-section .grid > :nth-child(3) { animation-delay: .1s; }
.if-compte .pm-section .grid > :nth-child(4) { animation-delay: .15s; } .if-compte .pm-section .grid > :nth-child(5) { animation-delay: .2s; }
.if-compte .pm-section .grid > :nth-child(6) { animation-delay: .25s; } .if-compte .pm-section .grid > :nth-child(7) { animation-delay: .3s; }
.if-compte .pm-section .grid > :nth-child(8) { animation-delay: .35s; } .if-compte .pm-section .grid > :nth-child(n+9) { animation-delay: .4s; }
.if-compte .pm-body:not(.hidden) > * { animation: if-form-monte .45s cubic-bezier(.2, .8, .2, 1) both; }

/* --- Boutons d'action (Modifier, Ajouter au panier…) : reflet, soulèvement --- */
.if-compte .pm-section button.bg-marron:not([id$="Pagination"] > button) {
  position: relative; overflow: hidden; min-height: 46px; border-radius: 8px;
  box-shadow: 0 14px 26px -18px rgba(101, 56, 24, .9);
  transition: background-color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, opacity .2s;
}
.if-compte .pm-section button.bg-marron:not([id$="Pagination"] > button)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); transform: translateX(-120%);
}
.if-compte .pm-section button.bg-marron:not([id$="Pagination"] > button):hover:not(:disabled) { background-color: var(--if-c-gold); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(255, 152, 0, .9); }
.if-compte .pm-section button.bg-marron:not([id$="Pagination"] > button):hover:not(:disabled)::after { animation: acc-ndd-reflet .8s ease; }
.if-compte .pm-section button.bg-marron:not([id$="Pagination"] > button):hover:not(:disabled) > i { animation: if-compte-pulse .5s ease; }
.if-compte .pm-section button.bg-marron:not([id$="Pagination"] > button):active:not(:disabled) { transform: translateY(1px); }

/* --- Tableaux de données --- */
.if-compte .pm-section .overflow-x-auto:has(> table) { border: 1px solid #efe4d8; border-radius: 12px; }
.if-compte .pm-section .overflow-x-auto > table > thead th { letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px !important; padding-top: 13px; padding-bottom: 13px; }
.if-compte table tbody tr {
  transition: background-color .2s, opacity .4s ease, transform .4s ease;
  animation: if-compte-ligne .5s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms);
}
.if-compte .pm-section table tbody tr:hover:not([class*="bg-"]) { background-color: #fbf6f0; }
.if-compte table tbody tr.is-new td { animation: if-compte-surligne 2.6s ease .3s both; }
.if-compte table tbody tr.is-removing { opacity: 0; transform: translateX(40px); pointer-events: none; }
/* Icônes de la colonne « Action » : léger soulèvement et pulsation au survol */
.if-compte .pm-section table tbody td:last-child :is(a, button):has(> i:only-child):not(:disabled) { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; border-radius: 8px; transition: color .2s, background-color .2s, transform .2s; }
.if-compte .pm-section table tbody td:last-child :is(a, button):has(> i:only-child):not(:disabled):hover { background: color-mix(in srgb, currentColor 10%, transparent); transform: translateY(-2px); }
.if-compte .pm-section table tbody td:last-child :is(a, button):has(> i:only-child):not(:disabled):hover > i { animation: if-compte-pulse .5s ease; }
.if-compte .pm-section table tbody td:last-child span:has(> i:only-child) { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; }

/* --- Pagination : boutons ronds, page active en relief (modèle Portfolio de index.php) --- */
.if-compte [id$="Pagination"] { gap: 8px !important; flex-wrap: wrap; }
.if-compte [id$="Pagination"] > button {
  width: auto !important; min-width: 38px; height: 38px !important; padding: 0 10px; border-radius: 999px !important;
  border: 1.5px solid #f1e6d9 !important; background: #fff; color: var(--if-c-marron);
  font: 700 13.5px/1 var(--if-police-titre, Poppins), sans-serif !important;
  transition: color .2s, background-color .25s, border-color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s !important;
  animation: if-compte-page .4s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.if-compte [id$="Pagination"] > button:nth-child(2) { animation-delay: .03s; } .if-compte [id$="Pagination"] > button:nth-child(3) { animation-delay: .06s; }
.if-compte [id$="Pagination"] > button:nth-child(4) { animation-delay: .09s; } .if-compte [id$="Pagination"] > button:nth-child(n+5) { animation-delay: .12s; }
.if-compte [id$="Pagination"] > button:hover:not(:disabled):not(.bg-marron) { border-color: var(--if-c-gold) !important; color: var(--if-c-gold); background: #fff; transform: translateY(-3px); }
.if-compte [id$="Pagination"] > button.bg-marron { border-color: var(--if-c-marron) !important; background: var(--if-c-marron); color: #fff; transform: scale(1.1); box-shadow: 0 8px 18px -8px rgba(101, 56, 24, .8); }
.if-compte [id$="Pagination"] > button:disabled { opacity: .35; cursor: default; }
.if-compte [id$="Pagination"] > button:first-child:not(:disabled):hover i { animation: if-compte-fleche-g .6s ease infinite; }
.if-compte [id$="Pagination"] > button:last-child:not(:disabled):hover i { animation: if-compte-fleche-d .6s ease infinite; }

/* --- Messages de succès : entrée, coche qui pivote, trait de 4 s, fondu de sortie (modèle rubriques Connexion / Devis) --- */
.if-compte .pm-success, .if-compte [id$="SuccessMsg"] {
  position: relative; overflow: hidden; gap: 10px !important; padding: 12px 16px 14px !important; border-radius: 8px !important;
  border: 1px solid #a7f3d0 !important; background: #ecfdf5 !important; color: #047857 !important; font-weight: 700; line-height: 1.4;
}
.if-compte .pm-success:not(.hidden), .if-compte [id$="SuccessMsg"]:not(.hidden) { animation: if-form-monte .45s cubic-bezier(.2, .8, .2, 1) both; }
.if-compte .pm-success:not(.hidden) > i, .if-compte [id$="SuccessMsg"]:not(.hidden) > i { color: #059669; animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) .1s both; }
.if-compte .pm-success::after, .if-compte [id$="SuccessMsg"]::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: #10b981; transform-origin: left; transform: scaleX(0);
}
.if-compte .pm-success:not(.hidden)::after, .if-compte [id$="SuccessMsg"]:not(.hidden)::after { animation: acc-cnx-progression 4s linear forwards; }
.if-compte .pm-success.is-relance::after { animation: none; }
.if-compte .pm-success.is-sortie, .if-compte [id$="SuccessMsg"].is-sortie { animation: acc-cnx-fondu .45s ease forwards; }
/* Messages d'erreur : entrée + secousse */
.if-compte [id$="ErrMsg"]:not(.hidden) { animation: if-form-monte .4s cubic-bezier(.2, .8, .2, 1) both, if-secoue .45s cubic-bezier(.36, .07, .19, .97) .4s; }

/* --- Alertes de confirmation (suppression, réabonnement) : modèle .sgn-confirm de index.php --- */
html.adm-modale-ouverte body.if-compte { overflow: hidden; }
.if-compte .if-compte-confirm { z-index: 20050; }
.if-compte .if-compte-confirm.hidden { display: none; }
.if-compte .if-compte-confirm.hidden.is-closing { display: grid; }       /* le temps de l'animation de fermeture */
.if-compte .if-compte-confirm.is-closing .sgn-confirm__fond { opacity: 0; }
.if-compte-confirm--autre .sgn-confirm__icone { background: #fff4e3; color: var(--if-c-marron); }
.if-compte-confirm--autre .sgn-confirm__icone::after { border-color: rgba(255, 152, 0, .45); }
.if-compte-confirm--autre.is-open .sgn-confirm__icone i { animation: if-compte-tourne .7s cubic-bezier(.34, 1.56, .64, 1) .25s; }
.if-compte-confirm--autre .sgn-confirm__oui { background: var(--if-c-marron); }
.if-compte-confirm--autre .sgn-confirm__oui:hover, .if-compte-confirm--autre .sgn-confirm__oui:focus-visible { background: var(--if-c-gold); box-shadow: 0 10px 20px -10px rgba(255, 152, 0, .9); }
.if-compte table tbody tr.adm-ligne-ciblee td { background: #fdecea !important; }

@keyframes if-compte-ligne { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes if-compte-surligne { 0%, 30% { background: rgba(255, 152, 0, .22); } 100% { background: transparent; } }
@keyframes if-compte-page { from { opacity: 0; transform: translateY(10px) scale(.8); } to { opacity: 1; } }
@keyframes if-compte-pulse { 50% { transform: scale(1.2); } }
@keyframes if-compte-fleche-g { 50% { transform: translateX(-3px); } }
@keyframes if-compte-fleche-d { 50% { transform: translateX(3px); } }
@keyframes if-compte-tourne { from { transform: rotate(-200deg); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .if-compte .pm-section .grid > *, .if-compte .pm-body > *, .if-compte table tbody tr, .if-compte table tbody tr.is-new td,
  .if-compte [id$="Pagination"] > button, .if-compte .pm-success, .if-compte .pm-success::after, .if-compte .pm-success > i,
  .if-compte [id$="SuccessMsg"], .if-compte [id$="SuccessMsg"]::after, .if-compte [id$="ErrMsg"] { animation: none !important; }
}
/* Compte client — 10/11/2026 : les listes déroulantes d'un champ (ex. « Produits » de « Souscrire à un abonnement »)
   passent au-dessus des champs suivants (l'animation d'apparition crée un plan propre à chaque champ) */
.if-compte .pm-section .grid > :has([id$="_dropdown"]), .if-compte .pm-section .grid > :focus-within { position: relative; z-index: 30; }
.if-compte .pm-section [id$="_dropdown"] { z-index: 40; box-shadow: 0 18px 40px -18px rgba(59, 42, 30, .45); }
/* Bouton désactivé (ex. « Ajouter au panier » sans catégorie disponible) */
.if-compte .pm-section button.bg-marron:disabled, .if-compte .pm-section button.bg-blue-900:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.if-compte #pcp_produits_box.bg-gray-100 { background-color: #f4efe9; cursor: not-allowed; }
.if-compte #pcp_produits_box.bg-gray-100 input { cursor: not-allowed; }
/* Compte Apprenant — mes-cours.php (10/11/2026) : tableau de la lightbox « Classement dans la classe »
   (même habillage que les tableaux des sections ; lignes en cascade une fois la fenêtre ouverte, podium mis en valeur) */
.if-compte #pmpClassementWrap { border: 1px solid #efe4d8; border-radius: 12px; }
.if-compte #pmpClassementWrap thead th { letter-spacing: .04em; text-transform: uppercase; font-size: 11px !important; padding-top: 12px; padding-bottom: 12px; }
.if-compte #pmpClassementTableBody tr { animation-delay: calc(.25s + var(--i, 0) * 80ms); }
.if-compte #pmpClassementTableBody tr:hover { background-color: #fbf6f0; }
.if-compte #pmpClassementTableBody tr:nth-child(-n+3) td:first-child { box-shadow: inset 3px 0 0 var(--if-c-gold); }
.if-compte #pmpClassementTableBody tr:first-child td { background-color: rgba(255, 152, 0, .08); }
.if-compte #pmpClassementTableBody .fa-trophy { display: inline-block; animation: if-compte-trophee 2.4s ease-in-out 1s infinite; transform-origin: 50% 100%; }
@keyframes if-compte-trophee { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-14deg) scale(1.2); } 86% { transform: rotate(12deg) scale(1.2); } 94% { transform: rotate(-6deg); } }
/* Ligne « Moyenne générale / podium / recherche » de Mes cours : la recherche reste à droite */
.if-compte .pm-body > .flex:has(> .if-recherche-admin) .if-recherche-admin { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .if-compte #pmpClassementTableBody .fa-trophy { animation: none; } }
/* mes-cours.php (10/11/2026) : section « Mes cours » élargie (1120 px) — la recherche, même élargie pendant la saisie,
   tient sur la ligne « Moyenne générale / podium », et le tableau n'a plus de barre de défilement horizontale */
/* #mcrConteneur : largeur du back-office (.adm-contenu, 1380 px) depuis le 10/11/2026 */
@media (min-width: 768px) {
  .if-compte #mcrConteneur .pm-body > .flex:has(> .if-recherche-admin) { flex-wrap: nowrap; }
  .if-compte #mcrConteneur .pm-body > .flex:has(> .if-recherche-admin) > .if-recherche-admin { min-width: 0; }
}
.if-compte #mcrConteneur #pmpListWrap thead th { letter-spacing: .02em; }
/* Compte Formateur / Client (10/11/2026) : données des lightbox — les lignes des tableaux d'une fenêtre
   (Voir Chapitres, Leçons, Détail de la commande…) arrivent en cascade une fois la fenêtre ouverte ; listes et blocs de détail aussi */
.if-compte .fixed.inset-0 table tbody tr { animation-delay: calc(.2s + var(--i, 0) * 70ms); }
.if-compte .fixed.inset-0 .overflow-x-auto:has(> table) { border: 1px solid #efe4d8; border-radius: 12px; }
.if-compte .fixed.inset-0 .overflow-x-auto > table > thead th { letter-spacing: .04em; text-transform: uppercase; font-size: 11px !important; }
.if-compte .fixed.inset-0 table tbody tr:hover:not([class*="bg-"]) { background-color: #fbf6f0; }
.if-compte .fixed.inset-0:not(.hidden) :is(.grid, .space-y-3, .space-y-4) > * { animation: if-form-monte .45s cubic-bezier(.2, .8, .2, 1) both; }
.if-compte .fixed.inset-0:not(.hidden) :is(.grid, .space-y-3, .space-y-4) > :nth-child(2) { animation-delay: .06s; }
.if-compte .fixed.inset-0:not(.hidden) :is(.grid, .space-y-3, .space-y-4) > :nth-child(3) { animation-delay: .12s; }
.if-compte .fixed.inset-0:not(.hidden) :is(.grid, .space-y-3, .space-y-4) > :nth-child(n+4) { animation-delay: .18s; }
/* Champs de formulaire des lightbox (Ajouter Module, Chapitre, Leçon, QCM…) : même habillage que dans les sections */
.if-compte .fixed.inset-0 :is(input, select, textarea).border:not(.border-0):not([type="checkbox"]):not([type="radio"]) {
  border: 1.5px solid #e4d9ce; border-radius: 6px; background-color: #fffdf9; font-weight: 600; color: #3b2a1e;
  transition: border-color .2s, box-shadow .25s, background-color .2s;
}
.if-compte .fixed.inset-0 :is(input, select, textarea).border:not(.border-0):not(:disabled):not([readonly]):hover { border-color: #d4c3b2; }
.if-compte .fixed.inset-0 :is(input, select, textarea).border:not(.border-0):not([readonly]):focus { outline: none; border-color: var(--if-c-gold); background-color: #fff; box-shadow: 0 0 0 4px rgba(255, 152, 0, .16); }
.if-compte .fixed.inset-0 :is(input, select, textarea).border:not(.border-0):is(:disabled, [readonly]):not([style*="background"]) { background-color: #f4efe9; color: #9a8b7e; }
.if-compte .fixed.inset-0 .border-red-500 { border-color: #dc2626 !important; background-color: #fff6f6 !important; box-shadow: 0 0 0 4px rgba(220, 38, 38, .1) !important; animation: if-secoue .45s cubic-bezier(.36, .07, .19, .97) both; }
.if-compte .fixed.inset-0 button.bg-marron:not([id$="Pagination"] > button) { transition: background-color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
.if-compte .fixed.inset-0 button.bg-marron:not([id$="Pagination"] > button):hover:not(:disabled) { background-color: var(--if-c-gold); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(255, 152, 0, .9); }
@media (prefers-reduced-motion: reduce) { .if-compte .fixed.inset-0 :is(.grid, .space-y-3, .space-y-4) > * { animation: none !important; } }
/* mes-cours-formateur.php (10/11/2026) : boutons « Ajouter Module / Voir Chapitres » et recherche (même élargie) sur une seule ligne */
@media (min-width: 768px) {
  .if-compte #mcrConteneur .pm-body > .flex:has(> .if-recherche-admin) > .flex { flex-wrap: nowrap; flex-shrink: 0; }
}

/* =====================================================================
   RAPPEL « COMPTE APPRENANT » (10/11/2026) — Client qui achète une Formation (FOR-n)
   index.php (lightbox « Détail produit ») et reglement-commande.php (au-dessus de « Commander »)
   ===================================================================== */
.if-note-apprenant {
  display: flex; align-items: flex-start; gap: 10px; margin: 0 0 14px; padding: 10px 14px;
  border: 1px solid #f5c98a; border-left: 4px solid var(--if-c-gold); border-radius: 8px; background: #fff7e8;
  color: #6b4a2b; font-size: 13px; font-weight: 600; line-height: 1.45;
  animation: if-form-monte .45s cubic-bezier(.2, .8, .2, 1) both;
}
.if-note-apprenant[hidden] { display: none; }
.if-note-apprenant > i { color: var(--if-c-gold); font-size: 16px; margin-top: 1px; animation: if-info-pastille .5s cubic-bezier(.34, 1.56, .64, 1) .15s both; }
.if-note-apprenant strong { color: var(--if-c-marron); }
.if-note-apprenant a { display: inline-block; margin-top: 4px; color: var(--if-c-marron); font-weight: 800; text-decoration: underline; text-decoration-color: var(--if-c-gold); text-underline-offset: 3px; transition: color .2s; }
.if-note-apprenant a:hover { color: var(--if-c-gold); }
@media (prefers-reduced-motion: reduce) { .if-note-apprenant, .if-note-apprenant > i { animation: none; } }
/* Rubrique « Créer un compte » : service imposé et figé (index.php?rubrique=compte&service=…, 10/11/2026) */
.acc-cpt__services--fige .acc-awm__option { cursor: not-allowed; }
.acc-cpt__services--fige .acc-awm__option:has(input:not(:checked)) { opacity: .45; filter: grayscale(.6); }
.acc-cpt__services--fige .acc-awm__option:has(input:not(:checked)):hover { transform: none; box-shadow: none; border-color: inherit; }
.acc-cpt__services--fige .acc-awm__option:has(input:checked) { pointer-events: none; }
/* Service non retenu : sans rond de sélection. Service imposé : cadenas distinct, à gauche du check, tous deux à droite */
.acc-cpt__services--fige .acc-awm__option:has(input:not(:checked)) .acc-awm__option-coche { display: none; }
.acc-cpt__services--fige .acc-awm__option:has(input:checked) { padding-right: 76px; }
.acc-cpt__services--fige .acc-awm__option:has(input:checked)::after {
  content: "\f023"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; top: 50%; right: 44px; margin-top: -11px;
  width: 22px; height: 22px; border-radius: 50%; background: var(--if-c-marron); color: #fff; font-size: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  animation: if-info-pastille .45s cubic-bezier(.34, 1.56, .64, 1) .55s both;
}
/* Impression — badges « Goodies / Marketing / Signalétique » (10/11/2026) : apparition douce des produits filtrés */
.bureau-card.is-filtre-entree { animation: if-badge-cartes .55s cubic-bezier(.2, .8, .2, 1) calc(var(--rang-filtre, 0) * 80ms) both; }
@keyframes if-badge-cartes { from { opacity: 0; transform: translateY(18px) scale(.96); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .bureau-card.is-filtre-entree { animation: none; } }

/* =====================================================================
   FORMATIONS — badges Prérequis / Objectifs / Matériel / Formateur sous l'image de « Détail produit »
   et leur lightbox (#frmInfoModal) — 10/11/2026
   ===================================================================== */
.frm-badges { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 20px 4px; }
.frm-badges[hidden] { display: none; }
.frm-badge {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid #ecdcc8; background: #fff; color: var(--if-c-marron);
  font: 700 13px/1 var(--if-police-titre, Poppins), sans-serif; cursor: pointer;
  box-shadow: 0 6px 14px -10px rgba(101, 56, 24, .55);
  transition: color .2s, background-color .25s, border-color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.frm-badge i { color: var(--if-c-gold); font-size: 13px; transition: color .2s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.frm-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 50%, transparent 70%); transform: translateX(-120%); pointer-events: none; }
.frm-badge:hover, .frm-badge:focus-visible { outline: none; border-color: var(--if-c-gold); transform: translateY(-3px); box-shadow: 0 12px 22px -12px rgba(255, 152, 0, .8); }
.frm-badge:hover::after { animation: acc-ndd-reflet .8s ease; }
.frm-badge:hover i { transform: rotate(-12deg) scale(1.2); }
.frm-badge.is-actif { background: var(--if-c-marron); border-color: var(--if-c-marron); color: #fff; }
.frm-badge.is-actif i { color: var(--if-c-gold); }
.frm-badge:active { transform: scale(.95); }
.frm-badges.is-entree .frm-badge { animation: frm-badge-entree .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.frm-badges.is-entree .frm-badge:nth-child(2) { animation-delay: .07s; }
.frm-badges.is-entree .frm-badge:nth-child(3) { animation-delay: .14s; }
.frm-badges.is-entree .frm-badge:nth-child(4) { animation-delay: .21s; }
@keyframes frm-badge-entree { from { opacity: 0; transform: translateY(14px) scale(.7); } to { opacity: 1; transform: none; } }

/* Lightbox : voile sans flou, boîte qui jaillit en 3D, icône en éclat, contenu en cascade */
.frm-info { position: fixed; inset: 0; z-index: 20100; display: grid; place-items: center; padding: 16px; perspective: 1200px; }
.frm-info[hidden] { display: none; }
.frm-info__voile { position: absolute; inset: 0; background: rgba(28, 18, 10, .45); opacity: 0; transition: opacity .3s ease; }
.frm-info.is-ouvert .frm-info__voile { opacity: 1; }
.frm-info__boite {
  position: relative; width: min(560px, 100%); max-height: 80vh; overflow-y: auto; padding: 26px 28px 28px; border-radius: 20px;
  background: #fff; box-shadow: 0 40px 80px -30px rgba(40, 24, 10, .6), 0 0 0 1px rgba(255, 152, 0, .12);
  transform-origin: 50% 60%;
}
.frm-info.is-ouvert .frm-info__boite { animation: frm-waouh .75s cubic-bezier(.22, 1.4, .36, 1) both; }
.frm-info.is-fermeture .frm-info__voile { opacity: 0; }
.frm-info.is-fermeture .frm-info__boite { animation: frm-sortie .3s ease forwards; }
@keyframes frm-waouh {
  0%   { opacity: 0; transform: rotateX(-35deg) translateY(60px) scale(.6); }
  55%  { opacity: 1; transform: rotateX(8deg) translateY(-8px) scale(1.04); }
  80%  { transform: rotateX(-3deg) translateY(2px) scale(.99); }
  100% { opacity: 1; transform: none; }
}
@keyframes frm-sortie { to { opacity: 0; transform: translateY(24px) scale(.92); } }
.frm-info__fermer {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f6efe7; color: #8a7564;
  display: grid; place-items: center; cursor: pointer; transition: background-color .2s, color .2s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.frm-info__fermer:hover, .frm-info__fermer:focus-visible { outline: none; background: #fdecec; color: #dc2626; transform: rotate(90deg); }
.frm-info__entete { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.frm-info__icone {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  background: var(--if-c-marron); color: var(--if-c-gold); font-size: 22px; box-shadow: 0 14px 26px -14px rgba(101, 56, 24, .9);
}
.frm-info__icone::after { content: ""; position: absolute; inset: -6px; border-radius: 20px; border: 2px solid rgba(255, 152, 0, .55); opacity: 0; }
.frm-info.is-ouvert .frm-info__icone { animation: frm-icone .7s cubic-bezier(.34, 1.56, .64, 1) .25s both; }
.frm-info.is-ouvert .frm-info__icone::after { animation: frm-eclat .9s ease-out .45s; }
@keyframes frm-icone { from { transform: rotate(-180deg) scale(0); } to { transform: none; } }
@keyframes frm-eclat { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.6); } }
.frm-info__titre { margin: 0; font: 800 22px/1.2 var(--if-police-titre, Poppins), sans-serif; color: #2b1d12; }
.frm-info.is-ouvert .frm-info__titre { animation: if-form-monte .5s cubic-bezier(.2, .8, .2, 1) .3s both; }
.frm-info__barre { display: block; width: 0; height: 3px; margin: 14px 0 18px; border-radius: 3px; background: linear-gradient(90deg, var(--if-c-gold), #ffcf7a); }
.frm-info.is-ouvert .frm-info__barre { animation: frm-barre .6s cubic-bezier(.2, .8, .2, 1) .4s forwards; }
@keyframes frm-barre { to { width: 72px; } }
.frm-info__corps { color: #4a3a2d; font-size: 14px; line-height: 1.6; }
.frm-info__corps ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.frm-info__corps li { padding: 9px 12px; border-radius: 10px; background: #fdf8f2; border: 1px solid #f3e7d8; }
.frm-info__formateur { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #f1e6d9; }
.frm-info__vide { margin: 0; color: #9a8b7e; font-style: italic; }
.frm-info.is-ouvert .frm-info__element { animation: frm-element .5s cubic-bezier(.2, .8, .2, 1) calc(.5s + var(--frm-i, 0) * 70ms) both; }
@keyframes frm-element { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .frm-badges.is-entree .frm-badge, .frm-info.is-ouvert .frm-info__boite, .frm-info.is-ouvert .frm-info__icone, .frm-info.is-ouvert .frm-info__icone::after,
  .frm-info.is-ouvert .frm-info__titre, .frm-info.is-ouvert .frm-info__element, .frm-info.is-fermeture .frm-info__boite { animation: none; }
  .frm-info.is-ouvert .frm-info__barre { animation: none; width: 72px; }
}
/* Badges de formation : les 4 sur une ligne sous l'image (colonne de 400 px) */
@media (min-width: 640px) {
  .frm-badges { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 16px 16px 4px; }
  .frm-badges[hidden] { display: none; }
  .frm-badge { justify-content: center; padding: 8px 6px; gap: 5px; font-size: 11.5px; letter-spacing: -.01em; }
  .frm-badge i { font-size: 11px; }
}

/* 10/11/2026 (2) : 6 badges de formation (Description, Caractéristiques, Prérequis / Objectifs, Matériel, Formateur),
   rectangles légèrement arrondis, plus grands, 3 par ligne, centrés sous l'image ; icône des lightbox réduite */
#detailsModalOnglets[hidden] { display: none; }
.frm-badges, .frm-badges:not([hidden]) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 18px 20px 6px; justify-content: center; }
.frm-badges[hidden] { display: none; }
.frm-badge { justify-content: center; border-radius: 9px; padding: 11px 10px; gap: 7px; font-size: 13px; letter-spacing: 0; min-height: 44px; }
.frm-badge i { font-size: 13px; }
.frm-badges.is-entree .frm-badge:nth-child(5) { animation-delay: .28s; }
.frm-badges.is-entree .frm-badge:nth-child(6) { animation-delay: .35s; }
@media (min-width: 640px) { .frm-badges { padding: 18px 18px 6px; } .frm-badge { padding: 11px 6px; font-size: 12.5px; gap: 6px; } }
.frm-info__icone { width: 40px; height: 40px; border-radius: 12px; font-size: 16px; }
.frm-info__icone::after { inset: -5px; border-radius: 16px; }
.frm-info__titre { font-size: 20px; }
.frm-info__texte { margin: 0; }
/* colonnes à la largeur des libellés (« Caractéristiques » ne déborde plus), groupe centré sous l'image */
.frm-badges, .frm-badges:not([hidden]) { grid-template-columns: repeat(3, auto); justify-content: center; }
.frm-badges[hidden] { display: none; }
@media (min-width: 640px) { .frm-badges { gap: 8px; padding: 18px 12px 6px; } .frm-badge { padding: 11px 12px; } }
@media (min-width: 640px) {
  .frm-badges { gap: 8px; padding: 18px 10px 6px; }
  .frm-badge { min-width: max-content; white-space: nowrap; padding: 11px 9px; gap: 6px; font-size: 12px; }
}
/* 10/11/2026 : autres rubriques (Logo, Création, Impressions, SaaS, Cachet, Matériels) — 2 badges seulement, centrés */
.frm-badges--simple .frm-badge:not([data-frm="description"]):not([data-frm="caracteristiques"]) { display: none; }
.frm-badges.frm-badges--simple:not([hidden]) { grid-template-columns: repeat(2, auto); justify-content: center; }

/* =====================================================================
   PARCOURS « IMPRIMER LE QR CODE SUR … » (qrcode-rubrique.php) — 11/11/2026
   - bouton « Imprimer le QR Code sur … » entre « CGV validées » et « Ajouter au panier » ;
     état « Choix de support(s) effectué(s) » : bleu marine gras, fond bleu très clair, sans survol, non cliquable ;
   - « Retour au QR Code dynamique » sous le carrousel des impressions (bleu marine, survol bleu ciel) ;
   - lien « Panier » du header en bleu marine et non cliquable tant que le QR Code n'est pas ajouté au panier.
   ===================================================================== */
.acc-qro__support-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 22px; border-radius: 10px; cursor: pointer;
  background: #fff; color: #1e3a8a; border: 2px solid #1e3a8a; font: 700 15px/1.3 var(--if-police-titre, Poppins), sans-serif;
  animation: qrs-apparition .5s cubic-bezier(.34, 1.56, .64, 1) both;
  transition: background-color .2s, color .2s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.acc-qro__support-btn i { transition: transform .3s; }
.acc-qro__support-btn:not(.is-effectue):hover { background: #1e3a8a; color: #fff; transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(30, 58, 138, .9); }
.acc-qro__support-btn:not(.is-effectue):hover i { transform: rotate(-8deg) scale(1.12); }
.acc-qro__support-btn:not(.is-effectue) i { animation: acc-cgv-pulse 1.8s ease-in-out infinite; }
.acc-qro__support-btn.is-effectue,
.acc-qro__support-btn.is-effectue:hover { background: #eff6ff; color: #1e3a8a; border-color: #bfdbfe; font-weight: 800; transform: none; box-shadow: none; cursor: default; pointer-events: none; }
.acc-qro__support-btn:focus-visible { outline: 3px solid rgba(30, 58, 138, .35); outline-offset: 2px; }
.acc-qro__support-btn[hidden] { display: none; }

.qrs-retour-zone { display: flex; justify-content: center; margin: 26px 0 6px; }
.qrs-retour-zone[hidden] { display: none; }
.qrs-retour {
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 13px 28px; border: 0; border-radius: 12px; cursor: pointer; overflow: hidden;
  background: #1e3a8a; color: #fff; font: 700 15.5px/1.3 var(--if-police-titre, Poppins), sans-serif;
  box-shadow: 0 16px 30px -18px rgba(30, 58, 138, .95);
  transition: background-color .25s, transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
}
.qrs-retour::after {                    /* reflet qui traverse le bouton */
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg);
  animation: qrs-reflet 3.2s ease-in-out 1s infinite;
}
.qrs-retour i { transition: transform .3s; }
.qrs-retour:hover { background: #38bdf8; transform: translateY(-2px); box-shadow: 0 18px 32px -16px rgba(56, 189, 248, .95); }
.qrs-retour:hover i { transform: translateX(-4px) rotate(-10deg); }
.qrs-retour:focus-visible { outline: 3px solid rgba(56, 189, 248, .55); outline-offset: 3px; }
.qrs-retour-zone.is-entree .qrs-retour { animation: qrs-apparition .6s cubic-bezier(.34, 1.56, .64, 1) both, qrs-halo 2.4s ease-out .6s 2; }

a[data-nav-panier].is-qr-verrou,
a[data-nav-panier].is-qr-verrou:hover,
a[data-nav-panier].is-qr-verrou i,
a[data-nav-panier].is-qr-verrou span { color: #1e3a8a !important; }
a[data-nav-panier].is-qr-verrou { font-weight: 700; cursor: not-allowed; pointer-events: none; }

@keyframes qrs-apparition { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes qrs-reflet     { 0%, 60% { left: -60%; } 100% { left: 130%; } }
@keyframes qrs-halo       { 0% { box-shadow: 0 0 0 0 rgba(30, 58, 138, .45); } 100% { box-shadow: 0 0 0 16px rgba(30, 58, 138, 0); } }
@media (prefers-reduced-motion: reduce) {
  .acc-qro__support-btn, .qrs-retour, .qrs-retour::after, .qrs-retour-zone.is-entree .qrs-retour { animation: none !important; }
}
/* recapitulatif-panier.php : mention « QR Code dynamique à imprimer sur le support » (11/11/2026) */
.rcp-qr-support { display: flex; align-items: center; gap: 7px; margin: 8px 0 2px; color: #1e3a8a; font-weight: 700; font-size: 13px; }
.rcp-qr-support i { font-size: 13px; }


/* ══ Pack Business : icône « feuille » + lightbox « Fonctionnalités supplémentaires » (12/11/2026) ══ */
.acc-qro__fx-btn { position: relative; display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: 8px; vertical-align: middle; border: 0; border-radius: 9px; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, var(--if-c-gold, #ff9800), #e07b00); box-shadow: 0 8px 18px -8px rgba(255, 152, 0, .9);
  animation: acc-qro-feuille 2.6s ease-in-out infinite; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
.acc-qro__fx-btn > i { font-size: 15px; }
.acc-qro__fx-btn::before { content: ''; position: absolute; inset: -5px; border-radius: 12px; border: 2px solid rgba(255, 152, 0, .55); animation: acc-qro-onde 2.6s ease-out infinite; pointer-events: none; }
.acc-qro__fx-btn:hover, .acc-qro__fx-btn:focus-visible { outline: none; transform: translateY(-3px) rotate(-6deg) scale(1.08); box-shadow: 0 14px 26px -10px rgba(255, 152, 0, 1); animation-play-state: paused; }
.acc-qro__fx-pastille { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center;
  font-size: 10px; font-weight: 800; color: #fff; background: var(--if-c-marron, #653818); border: 2px solid #fff; }
@keyframes acc-qro-feuille { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-10deg); } 82% { transform: rotate(8deg); } 88% { transform: rotate(-5deg); } 94% { transform: rotate(3deg); } }
@keyframes acc-qro-onde { 0% { opacity: .9; transform: scale(.9); } 70%, 100% { opacity: 0; transform: scale(1.35); } }

.acc-qrfx { position: fixed; inset: 0; z-index: 30000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.acc-qrfx[hidden] { display: none; }
/* Arrière-plan laissé tel quel : ni fond sombre, ni flou (12/11/2026) — la zone transparente sert seulement à fermer au clic */
.acc-qrfx__fond { position: absolute; inset: 0; background: transparent; }
.acc-qrfx__boite { position: relative; width: min(860px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 30px 28px 28px; border-radius: 24px;
  background: #fff; border: 1px solid #f1e3d1; box-shadow: 0 40px 90px -30px rgba(101, 56, 24, .55), 0 0 0 6px rgba(255, 152, 0, .08); }
.acc-qrfx.is-ouvert .acc-qrfx__boite { animation: acc-qrfx-waouh .75s cubic-bezier(.18, 1.25, .4, 1) both; }
.acc-qrfx.is-ferme .acc-qrfx__boite { animation: acc-qrfx-sortie .3s ease-in both; }
@keyframes acc-qrfx-waouh {
  0%   { opacity: 0; transform: perspective(1200px) translateY(60px) rotateX(28deg) scale(.6); filter: blur(6px); }
  60%  { opacity: 1; transform: perspective(1200px) translateY(-8px) rotateX(-4deg) scale(1.03); filter: blur(0); }
  100% { opacity: 1; transform: none; }
}
@keyframes acc-qrfx-sortie { to { opacity: 0; transform: translateY(24px) scale(.92); } }
.acc-qrfx__eclat { position: absolute; top: -120px; left: 50%; width: 420px; height: 240px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 170, 40, .35), transparent); animation: acc-qrfx-eclat 3.5s ease-in-out infinite; }
@keyframes acc-qrfx-eclat { 0%, 100% { opacity: .6; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.15); } }
.acc-qrfx__fermer { position: absolute; top: 14px; right: 14px; z-index: 1; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; color: var(--if-c-marron, #653818); background: #f6efe6;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), background .2s, color .2s; }
.acc-qrfx__fermer:hover, .acc-qrfx__fermer:focus-visible { outline: none; transform: rotate(90deg); background: var(--if-c-marron, #653818); color: #fff; }
.acc-qrfx__tete { position: relative; text-align: center; margin-bottom: 22px; }
.acc-qrfx__icone { display: inline-grid; place-items: center; width: 62px; height: 62px; margin-bottom: 10px; border-radius: 18px; font-size: 26px; color: #fff;
  background: linear-gradient(135deg, #8a4b20, var(--if-c-marron, #653818)); box-shadow: 0 14px 28px -12px rgba(101, 56, 24, .8); }
.acc-qrfx.is-ouvert .acc-qrfx__icone i { animation: acc-qrfx-fusee 1.1s .35s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes acc-qrfx-fusee { from { transform: translate(-18px, 18px) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.acc-qrfx__titre { margin: 0; font-family: var(--if-police-titre, Poppins), sans-serif; font-size: clamp(19px, 2.4vw, 25px); font-weight: 800; color: #2b1a10; }
.acc-qrfx__sous { margin: 6px 0 0; font-size: 13.5px; color: #8a7564; }
.acc-qrfx__grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.acc-qrfx__badge { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 12px; border: 1.5px solid #efe3d4; background: #fffdf9; overflow: hidden;
  opacity: 0; transition: border-color .25s, transform .3s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s; }
.acc-qrfx.is-ouvert .acc-qrfx__badge { animation: acc-qrfx-badge .55s cubic-bezier(.2, 1.2, .4, 1) both; animation-delay: calc(.3s + var(--i, 0) * 70ms); }
@keyframes acc-qrfx-badge { from { opacity: 0; transform: translateY(18px) scale(.9); } to { opacity: 1; transform: none; } }
.acc-qrfx__badge::after { content: ''; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .8), transparent); transform: skewX(-18deg); }
.acc-qrfx__badge:hover { border-color: var(--if-c-gold, #ff9800); transform: translateY(-3px); box-shadow: 0 14px 26px -16px rgba(255, 152, 0, .8); }
.acc-qrfx__badge:hover::after { animation: acc-sw-reflet .8s ease; }
.acc-qrfx__badge-ico { flex: none; width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; color: var(--if-c-marron, #653818);
  background: linear-gradient(135deg, #fff1d6, #ffe2ad); transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.acc-qrfx__badge:hover .acc-qrfx__badge-ico { transform: scale(1.12) rotate(-8deg); }
.acc-qrfx__badge-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-qrfx__badge-txt b { font-family: var(--if-police-titre, Poppins), sans-serif; font-size: 14px; color: #2b1a10; }
.acc-qrfx__badge-txt small { font-size: 12px; line-height: 1.4; color: #8a7564; }
@media (prefers-reduced-motion: reduce) {
  .acc-qro__fx-btn, .acc-qro__fx-btn::before, .acc-qrfx__eclat { animation: none; }
  .acc-qrfx.is-ouvert .acc-qrfx__boite, .acc-qrfx.is-ouvert .acc-qrfx__badge, .acc-qrfx.is-ouvert .acc-qrfx__icone i { animation: none; opacity: 1; }
}

/* ── 13/11/2026 : rubrique QR Code — smartphone animé avec QR Code (repris de l'aperçu de qrcode-admin.php, .qra-tel) ── */
.acc-qrd__tel { margin: 0; display: flex; align-items: center; justify-content: center; }
.acc-tel { position: relative; width: 250px; max-width: 100%; aspect-ratio: 290 / 590; padding: 10px; border-radius: 42px; background: #121212;
  box-shadow: inset 0 0 0 2px #2b2b2b, 0 30px 60px -28px rgba(40, 22, 10, .75); }
.acc-qrd__etape.is-active .acc-tel { animation: acc-tel-entree .8s cubic-bezier(.2, .9, .3, 1.15) .1s both, acc-tel-flotte 6s ease-in-out 1s infinite; }
@keyframes acc-tel-entree { from { opacity: 0; transform: translateY(26px) rotate(-3deg) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes acc-tel-flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.acc-tel__btn { position: absolute; left: -3px; width: 4px; border-radius: 3px 0 0 3px; background: #1d1d1d; }
.acc-tel__btn--1 { top: 95px; height: 26px; } .acc-tel__btn--2 { top: 134px; height: 45px; } .acc-tel__btn--3 { top: 186px; height: 45px; }
.acc-tel__ecran { position: relative; height: 100%; border-radius: 33px; overflow: hidden; background: #fbf8f4; }
.acc-tel__barre { position: absolute; z-index: 3; top: 0; left: 0; right: 0; height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 19px 0 23px; font-size: 10px; font-weight: 700; color: #1a1a1a; }
.acc-tel__ilot { position: absolute; left: 50%; top: 8px; width: 76px; height: 21px; border-radius: 999px; background: #121212; transform: translateX(-50%); }
.acc-tel__etat { display: inline-flex; gap: 3px; font-size: 8.5px; }
.acc-tel__home { position: absolute; z-index: 3; left: 50%; bottom: 6px; width: 84px; height: 4px; border-radius: 4px; background: rgba(0, 0, 0, .35); transform: translateX(-50%); }
.acc-tel__vue { position: absolute; inset: 0; padding: 40px 14px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: radial-gradient(circle at 50% 0, #fdf3e3, #fbf8f4 60%); }
.acc-tel__titre { display: flex; align-items: center; gap: .4rem; margin-bottom: .8rem; font: 700 .8rem/1.2 var(--if-police-titre, Poppins), sans-serif; color: #2b211a; }
.acc-tel__titre i { color: #daa520; }
.acc-tel__qr { position: relative; width: 170px; height: 170px; padding: 9px; border-radius: 14px; background: #fff; box-shadow: 0 12px 30px -18px rgba(101, 56, 24, .55); }
.acc-tel__qr svg, .acc-tel__qr img { display: block; width: 100%; height: 100%; }
.acc-tel__balayage { position: absolute; left: 9px; right: 9px; top: 9px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #daa520, transparent); box-shadow: 0 0 12px #daa520;
  animation: acc-tel-balayer 2.6s ease-in-out infinite; }
@keyframes acc-tel-balayer { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(149px); } }
.acc-tel__lien { margin-top: .85rem; font: 700 .68rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #653818; word-break: break-all; }
@media (max-width: 860px) { .acc-qrd__tel { margin-top: 6px; } }
@media (prefers-reduced-motion: reduce) { .acc-tel, .acc-tel__balayage { animation: none !important; } }
/* 13/11/2026 : smartphone réduit (× 0,62) pour s'accorder à la hauteur du texte et garder « Suivant » visible sans défiler.
   La réduction se fait sur un conteneur dédié, les animations du téléphone (entrée, flottement) gardent leur propre transform. */
.acc-qrd__tel { align-self: center; width: 155px; height: 316px; margin: 0 auto; display: block; overflow: visible; }
.acc-tel-echelle { width: 250px; transform: scale(.62); transform-origin: top left; }
@media (max-width: 860px) { .acc-qrd__tel { width: 186px; height: 380px; } .acc-tel-echelle { transform: scale(.744); } }