/* rodriguepoclet.fr — accueil (direction B+ du canevas, docs/maquettes/accueil/). */

/* ---------- héros ---------- */
.heros { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 80px; align-items: center; padding: 48px var(--marge) 112px; }
.heros__texte { display: flex; flex-direction: column; gap: 32px; }
.heros__titre { font-size: 92px; line-height: 1; letter-spacing: -0.035em; }
.heros__intro { color: var(--encre-douce); font-size: 24px; line-height: 1.5; }
.heros__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.heros__actions .lien-souligne { font-size: 17px; }
/* Tout le visuel suit le diamètre de l'orbite pointillée (--orbite) : 600 px sur la maquette, puis la
   largeur de la colonne, plus ce que la gouttière (80 px) et la marge de page laissent de chaque côté.
   Rapports de la maquette : orbite orange 540, photo 440, hauteur 620 (padding 90 + photo + 90). */
.heros__visuel {
  --orbite: min(600px, 100% + 2 * min(80px, max(32px, (100vw - 1216px) / 2)));
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: calc(var(--orbite) * .15);
}
.heros__orbite { position: absolute; top: 50%; left: 50%; max-width: none; height: auto; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; }
.heros__orbite--pointillee { width: var(--orbite); }
.heros__orbite--orange { width: calc(var(--orbite) * .9); }
.heros__photo { position: relative; width: calc(var(--orbite) * 11 / 15); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.badge-malt {
  position: absolute;
  left: -8px;
  top: 79.5%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 20px;
  border-radius: 999px;
  background: var(--nuit);
  color: var(--sur-nuit-doux);
  font-size: 15px;
  text-decoration: none;
  box-shadow: 0 16px 36px rgba(20, 27, 45, .22);
}
.badge-malt:hover { color: var(--sur-nuit-doux); }
.badge-malt__logo { width: auto; height: 22px; }
.badge-malt__separateur { width: 1px; align-self: stretch; background: rgba(244, 245, 248, .18); }
.badge-malt__note { display: flex; flex-direction: column; gap: 4px; }
.badge-malt strong { color: var(--sur-nuit); }

/* ---------- piliers ---------- */
.piliers__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
/* Conteneur de requête : les visuels se resserrent quand la carte est étroite (voir plus bas). */
.pilier { height: 100%; display: flex; flex-direction: column; gap: 20px; padding: 32px; border-radius: 24px; background: var(--fond); transition: transform .4s var(--courbe), box-shadow .4s; container-type: inline-size; }
.pilier__tete { display: flex; align-items: center; justify-content: space-between; }
.pilier__icone { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--blanc); color: var(--orange-texte); }
.pilier__numero { color: var(--orange-texte); font: 700 18px/1 var(--police-titre); }
.pilier__titre { font-size: clamp(24px, 2.6vw, 28px); line-height: 1.18; letter-spacing: -0.015em; overflow-wrap: break-word; }
.pilier__texte { color: var(--gris); font-size: 16px; }
.pilier__visuel { height: 210px; margin-top: auto; overflow: hidden; border: 1px solid var(--trait-doux); border-radius: 14px; }
.pilier .bouton { align-self: flex-start; }
/* De 900 à 1 279 px, une carte par ligne : texte à gauche, visuel à droite (décision du 30/09/2026). En trois colonnes,
   les visuels y seraient trop étroits ; les trois colonnes reviennent à 1 280 px, où chaque visuel fait 320 px au moins. */
@media (min-width: 900px) and (max-width: 1279px) {
  .piliers__grille { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pilier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); grid-template-rows: auto auto 1fr auto; grid-template-areas: "tete visuel" "titre visuel" "texte visuel" "bouton visuel"; gap: 14px 48px; }
  .pilier__tete { grid-area: tete; }
  .pilier__titre { grid-area: titre; }
  .pilier__texte { grid-area: texte; max-width: 46ch; }
  .pilier__visuel { grid-area: visuel; align-self: center; margin-top: 0; }
  .pilier .bouton { grid-area: bouton; justify-self: start; align-self: end; }
}
.code-fenetre { padding: 18px 20px; border-color: var(--nuit); background: var(--nuit); color: var(--sur-nuit-doux); font: 12.5px/1.75 var(--police-code); }
.code-fenetre__barre { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(244, 245, 248, .1); color: #8A93A5; font-size: 11.5px; }
.code-fenetre__point { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.code-fenetre__code { margin: 0; font: inherit; white-space: pre; }

/* Visuel de la carte Hébergement Orbit : surveillance (docs/maquettes/animations/PiliersEssai3.dc.html). */
.surveillance { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px; border-color: var(--nuit); background: var(--nuit); color: var(--sur-nuit-doux); font-size: 12px; line-height: 1.5; }
.surveillance__entete { display: flex; align-items: center; gap: 8px; color: var(--sur-nuit); font-size: 13px; }
.surveillance__voyant { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; background: #3FB86E; }
.surveillance__site { min-width: 0; overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.surveillance__statut { flex-shrink: 0; margin-left: auto; padding: 2px 9px; border-radius: 999px; background: rgba(63, 184, 110, .16); color: #9FD4A6; font-size: 11.5px; font-weight: 600; }
.surveillance__legende { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #8A93A5; font-size: 11.5px; white-space: nowrap; }
.surveillance__coupure { display: inline-flex; align-items: center; gap: 5px; }
.surveillance__coupure::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #F07167; }
.surveillance__courbe { width: 100%; height: auto; }
.surveillance__axe { stroke: rgba(244, 245, 248, .08); }
.surveillance__periode { fill: #8A93A5; font: 600 9.5px var(--police-texte); }
.surveillance__periode--orbit { fill: var(--orange-clair); }
.surveillance__panne { stroke: #F07167; stroke-opacity: .6; stroke-dasharray: 2 3; }
.surveillance__point-panne { fill: #F07167; }
.surveillance__migration { stroke: rgba(244, 245, 248, .28); stroke-dasharray: 3 3; }
.surveillance__trace { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* La courbe de l'ancien hébergeur est en trois morceaux (deux coupures) : elle se dévoile de gauche à droite par un
   découpage (clip-path) ; un pointillé animé ferait pousser les trois morceaux en même temps. */
.surveillance__trace--avant { stroke: #8A93A5; }
.surveillance__trace--apres { stroke: var(--orange-clair); stroke-dasharray: 140; }
.surveillance__controles { display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none; font-size: 11.5px; }
.surveillance__controles li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(244, 245, 248, .06); }
.surveillance__controles li::before { content: '✓'; color: #9FD4A6; }
/* Carte étroite (seuil propre au composant, en plus du point de rupture de 900 px). Les vignettes passent sur trois
   lignes sous 296 px de visuel environ ; le seuil de 306 px garde une marge. Cela ne concerne plus que les téléphones de
   390 px et moins (sur ordinateur, les cartes sont larges jusqu'à 1 279 px). Le graphique garde ses proportions au lieu d'être écrasé ; les
   écarts, la légende et les vignettes se resserrent pour que tout tienne dans les 210 px (légende de 142 px pour
   146 px disponibles à 900 px, barre de défilement comprise). */
@container (max-width: 306px) {
  .surveillance { gap: 8px; }
  .surveillance__legende { gap: 4px; font-size: 10.5px; }
  .surveillance__courbe { flex-shrink: 0; }
  .surveillance__controles { gap: 4px 6px; font-size: 11px; line-height: 1.4; }
  .surveillance__controles li { padding: 2px 8px; }
}

/* ---------- avis (base commune dans site.css) ---------- */
.avis-zone { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; perspective: 1200px; }
.avis { height: 380px; overflow: hidden; transition: transform .35s ease, opacity .35s ease; }
.avis--retourne { transform: rotateX(90deg); opacity: 0; }
/* Le texte s'arrête à 8 lignes (points de suspension) et rétrécit s'il manque de place : l'auteur reste
   toujours visible sans changer la hauteur de la tuile. Pas de flex-grow : une boîte plus haute que
   8 lignes laisserait voir le haut de la 9e. Le texte complet reste dans la page. */
.avis__texte { flex: 0 1 auto; min-height: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; }
.tuile-malt { height: 380px; }

/* ---------- appel final ---------- */
.appel { display: flex; flex-direction: column; align-items: center; gap: 36px; padding: 128px var(--marge); text-align: center; }
.appel__titre { max-width: 1040px; font-size: 68px; line-height: 1.05; letter-spacing: -0.03em; }
.appel__texte { max-width: 640px; color: var(--gris); font-size: 20px; }
.appel__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; color: var(--gris); }

@media (max-width: 899px) {
  .heros { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px 20px 64px; }
  /* Maquette mobile : orbites 350 et 316, photo 256, hauteur 350 ; l'orbite ne dépasse la colonne que de 16 px par côté.
     Le badge suit l'orbite (à gauche du visuel à 375 px) au lieu de rester collé au bord sur les écrans plus larges. */
  .heros__visuel { --orbite: min(350px, 100% + 32px); order: -1; padding-block: calc(var(--orbite) * 47 / 350); }
  .heros__orbite--orange { width: calc(var(--orbite) * 316 / 350); }
  .heros__photo { width: calc(var(--orbite) * 256 / 350); }
  .badge-malt { left: max(0px, 50% - var(--orbite) / 2 + 7.5px); top: 78.3%; gap: 12px; padding: 10px 16px 10px 14px; font-size: 13px; }
  .badge-malt__logo { height: 17px; }
  .heros__texte { gap: 20px; }
  .heros .surtitre { gap: 10px; font-size: 12px; }
  .heros__titre { font-size: 54px; }
  .heros__intro { font-size: 18px; line-height: 1.55; }
  .heros__actions { flex-direction: column; align-items: stretch; gap: 6px; }
  .heros__actions .bouton { min-height: 56px; }
  .heros__actions .lien-souligne { align-self: center; display: inline-flex; align-items: center; min-height: 48px; }
  .piliers__grille { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pilier { gap: 16px; padding: 24px; border-radius: 20px; }
  .pilier__titre { font-size: 25px; }
  .pilier__texte { font-size: 15px; }
  .pilier .bouton { align-self: stretch; min-height: 52px; font-size: 16px; }
  .avis-zone { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .avis:nth-child(n+3) { display: none; }
  .avis { height: 370px; }
  .tuile-malt { height: 200px; }
  .appel { align-items: stretch; gap: 20px; padding: 72px 20px; }
  .appel__titre { font-size: 36px; }
  .appel__texte { font-size: 17px; }
  .appel__actions { flex-direction: column; gap: 12px; }
}

/* ---------- mouvement (flotte, clignote et pouls : site.css) ---------- */
@keyframes montee { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: none; } }
@keyframes eclosion { from { transform: scale(.92); } to { transform: none; } }
@keyframes voyant { 0% { box-shadow: 0 0 0 0 rgba(63, 184, 110, .5); } 70% { box-shadow: 0 0 0 10px rgba(63, 184, 110, 0); } 100% { box-shadow: 0 0 0 0 rgba(63, 184, 110, 0); } }
@keyframes surveillance-avant { 0% { clip-path: inset(-3px calc(100% + 3px) -3px -3px); } 45%, 100% { clip-path: inset(-3px); } }
@keyframes surveillance-apres { 0%, 50% { stroke-dashoffset: 140; } 80%, 100% { stroke-dashoffset: 0; } }
/* Vignettes de la surveillance : une à une à 0,8, 1,5 et 2,2 s du cycle de 5 s des courbes (maquette PiliersEssai3),
   toutes effacées en fin de cycle. Seules l'opacité et translate bougent. */
@keyframes vignette-1 { 0%, 16% { opacity: 0; translate: 0 4px; } 22%, 96% { opacity: 1; translate: none; } 100% { opacity: 0; translate: none; } }
@keyframes vignette-2 { 0%, 30% { opacity: 0; translate: 0 4px; } 36%, 96% { opacity: 1; translate: none; } 100% { opacity: 0; translate: none; } }
@keyframes vignette-3 { 0%, 44% { opacity: 0; translate: 0 4px; } 50%, 96% { opacity: 1; translate: none; } 100% { opacity: 0; translate: none; } }

@media (prefers-reduced-motion: no-preference) {
  .heros__texte > * { animation: montee .9s var(--courbe) both; }
  .heros__texte > :nth-child(2) { animation-delay: .1s; }
  .heros__texte > :nth-child(3) { animation-delay: .2s; }
  .heros__texte > :nth-child(4) { animation-delay: .3s; }
  .heros__photo { animation: eclosion 1.1s var(--courbe) .2s both; }
  .heros__orbite--orange { animation: tour 48s linear infinite; }
  .heros__orbite--pointillee { animation: tour 80s linear infinite reverse; }
  .is-orbites .heros__orbite { animation: none; } /* orbites.js les fait tourner (fuite du curseur, boutons de contact) */
  .badge-malt { animation: flotte 6s ease-in-out infinite; }
  .heros .pastille { animation: pouls 2s ease-out infinite; }
  .pilier:hover { transform: translateY(-8px); box-shadow: 0 28px 56px rgba(20, 27, 45, .12); }
  .surveillance__voyant { animation: voyant 2s ease-out infinite; }
  .surveillance__trace--avant { animation: surveillance-avant 5s linear infinite; }
  .surveillance__trace--apres { animation: surveillance-apres 5s ease-out infinite; }
  .surveillance__controles li:nth-child(1) { animation: vignette-1 5s linear infinite; }
  .surveillance__controles li:nth-child(2) { animation: vignette-2 5s linear infinite; }
  .surveillance__controles li:nth-child(3) { animation: vignette-3 5s linear infinite; }
  /* Pointeur sur la carte ou focus dedans : son visuel se fige (fenêtre de code comprise), comme les tuiles d'avis
     (décision du 28/09/2026). */
  .pilier:hover .pilier__visuel *,
  .pilier:hover .pilier__visuel *::before,
  .pilier:hover .pilier__visuel *::after,
  .pilier:focus-within .pilier__visuel *,
  .pilier:focus-within .pilier__visuel *::before,
  .pilier:focus-within .pilier__visuel *::after { animation-play-state: paused; }
}