/* ===========================================================
   Triangle Ondes — v1.1  (mise en page "Smart ID")
   Tout est scopé sous .to-section. Couleurs/dimensions pilotées
   par variables CSS injectées par le plugin (réglables en admin).
   =========================================================== */
.to-section{
  /* valeurs par défaut, surchargées en ligne par le plugin */
  --orange:#f39200; --txt:#6b6b6b; --dark:#192232;
  --tw:959px; --th:583px; --ttop:60px; --marge:75px;
  --pad:28px;
  position:relative;
  width:1300px;                         /* largeur cible, indépendante du conteneur du thème */
  max-width:calc(100vw - 16px);         /* jamais plus large que l'écran (pas de scroll horizontal) */
  height:var(--to-h, 760px);
  left:50%; transform:translateX(-50%); /* recentré, déborde symétriquement du conteneur étroit */
  margin:0;
  color:var(--txt);
  font-family:inherit;
}
.to-section *{ box-sizing:border-box; }

/* ---------- Scène (triangle de taille fixe, centré) ---------- */
.to-stage{
  position:absolute; top:var(--ttop); left:50%; transform:translateX(-50%);
  width:var(--tw); height:var(--th);
}
.to-shadow{ position:absolute; inset:-16px; z-index:0; pointer-events:none; }
.to-shadow img{ width:100%; height:100%; display:block; }

.to-clip{
  position:absolute; inset:0; z-index:1;
  -webkit-clip-path:polygon(0 0,100% 0,50% 100%); clip-path:polygon(0 0,100% 0,50% 100%);
  -webkit-filter:drop-shadow(0 22px 40px rgba(16,42,48,.16)); filter:drop-shadow(0 22px 40px rgba(16,42,48,.16));
}
.to-bg{ position:absolute; inset:0; background-size:cover; background-position:center;
  background-image:linear-gradient(180deg,#dfe7ea 0%,#eef3f4 100%); }
.to-section.to-veil .to-bg::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(11,32,39,.10) 0%, rgba(11,32,39,.40) 100%); }

.to-fixed{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.to-fixed img{ width:44%; max-width:360px; height:auto; }
.to-fixed.fit-cover img,.to-fixed.fit-contain img{ width:100%; height:100%; max-width:none; }
.to-fixed.fit-cover img{ object-fit:cover; }
.to-fixed.fit-contain img{ object-fit:contain; }

/* bande floutée, DANS le triangle (hérite de l'arrondi) */
.to-edge{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  -webkit-clip-path:polygon(100% 0, calc(100% - var(--marge)) 0, calc(50% - var(--marge)) 100%, 50% 100%);
          clip-path:polygon(100% 0, calc(100% - var(--marge)) 0, calc(50% - var(--marge)) 100%, 50% 100%);
  -webkit-backdrop-filter:blur(6px) saturate(1.15); backdrop-filter:blur(6px) saturate(1.15);
  background:linear-gradient(110deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
}

/* grenouille : premier plan décoratif, NON clippé, NON ondulé */
.to-frog{ position:absolute; z-index:3; top:14%; left:8%; width:20%; pointer-events:none; }
.to-frog img{ width:100%; height:auto; display:block; }

/* ---------- Partie 01 : colonne gauche, ancrée au bas de C ---------- */
.to-text{ position:absolute; left:0; right:0; top:0; bottom:0; z-index:4; pointer-events:none; }
.to-copy{
  position:absolute; left:var(--pad);
  bottom:calc(var(--to-h, 760px) - var(--ttop) - var(--th));
  width:auto; max-width:430px;            /* ajusté en JS pour rester à gauche de l'arête A→C */
  pointer-events:auto;
}
.to-kicker{ color:var(--orange); font-family:system-ui,sans-serif; font-size:13px; letter-spacing:.04em;
  text-transform:none; margin:0 0 14px; font-weight:600; }
.to-title{ color:var(--dark); font-size:clamp(24px,2.4vw,34px); line-height:1.12; margin:0 0 18px; font-weight:700; }
.to-title em{ font-style:italic; }
.to-para{ color:var(--txt); font-size:15px; line-height:1.7; margin:0 0 26px; }
.to-actions{ display:flex; gap:14px; flex-wrap:nowrap; align-items:center; }

/* Boutons */
.to-btn{ display:inline-block; font-family:system-ui,sans-serif; font-size:14px; font-weight:600;
  padding:13px 22px; border-radius:0; white-space:nowrap; flex:0 0 auto; text-decoration:none; cursor:pointer;
  transition:background-color .45s ease, color .45s ease, border-color .45s ease; }
.to-btn-fill{ background:var(--dark); color:#fff; border:1px solid var(--dark); border-radius:0 0 0 10px; }
.to-btn-fill:hover,.to-btn-fill:focus{ background:var(--orange); border-color:var(--orange); color:#fff; }
.to-btn-outline{ background:transparent; color:var(--dark); border:1px solid var(--dark); border-radius:0 10px 10px 0; }
.to-btn-outline:hover,.to-btn-outline:focus{ color:var(--orange); border-color:var(--orange); }

/* ---------- Partie 02 : items à droite (flèche + mot-clé orange + sous-titre) ---------- */
.to-items{ position:absolute; left:0; right:0; top:0; bottom:0; z-index:5; pointer-events:none; }
.to-item{ position:absolute; display:block; width:auto; text-decoration:none; pointer-events:auto; }
.to-item-head{ display:flex; align-items:center; gap:8px; color:var(--orange);
  font-family:system-ui,sans-serif; font-size:13px; font-weight:600; margin-bottom:4px;
  transition:transform .3s ease; will-change:transform; }
.to-item-arrow{ font-size:14px; line-height:1; }
.to-item-sub{ color:var(--dark); font-size:16px; font-weight:700; line-height:1.3; }
.to-item:hover .to-item-head,.to-item:focus .to-item-head{ transform:translateX(12px); }

.to-section a:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; border-radius:3px; }

/* ===========================================================
   RESPONSIVE
   =========================================================== */
/* Tablette (≤ 992) : triangle en haut, puis 2 colonnes centrées sans habillage */
@media (max-width:992px){
  .to-section{ height:auto; padding:24px 16px 36px; width:auto; max-width:100%; left:auto; transform:none; }
  .to-stage{ position:relative; top:auto; left:auto; transform:none; margin:0 auto;
    width:min(var(--tw),86vw); height:auto; aspect-ratio:959/583; }
  .to-clip{ -webkit-filter:drop-shadow(0 16px 30px rgba(16,42,48,.16)); filter:drop-shadow(0 16px 30px rgba(16,42,48,.16)); }
  .to-frog{ top:10%; left:-2%; width:18%; }
  .to-cols{ display:flex; gap:32px; margin-top:30px; }
  .to-text,.to-items{ position:relative; inset:auto; flex:1; }
  .to-copy{ position:relative; left:auto; bottom:auto; max-width:none; text-align:center; margin:0 auto; }
  .to-actions{ justify-content:center; }
  .to-items{ display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
  .to-item{ position:relative !important; left:auto !important; top:auto !important; width:auto; text-align:left; }
  .to-item-head{ justify-content:flex-start; }
}

/* Smartphone (≤ 680) : triangle (statique) puis Partie 01 puis Partie 02, empilés */
@media (max-width:680px){
  .to-cols{ display:block; }
  .to-text{ margin-top:26px; }
  .to-items{ margin-top:22px; display:block; text-align:left; }
  .to-copy{ text-align:left; }
  .to-actions{ justify-content:flex-start; flex-wrap:wrap; }
  .to-item{ position:relative !important; left:auto !important; top:auto !important; width:100% !important; text-align:left !important; margin:0 0 18px; }
  .to-item-head{ justify-content:flex-start !important; }
  .to-frog{ width:24%; }
}
@media (prefers-reduced-motion:reduce){
  .to-btn,.to-item-head{ transition:none; }
}